4

Dive into HTML5: Cache Manifest: Fallback section

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

鉴于此代码块的确切作用,我无法从 URL 中理解。后备部分是否意味着找不到任何内容时,显示offline.html页面

那么network: *所有资源都会被缓存?它还说

它在每个页面上使用常见的 CSS、JavaScript 和图像。这些资源中的每一个都需要在CACHE

这似乎与network: *似乎说缓存所有内容的地方相冲突?

4

2 回答 2

14

缓存清单中有三种类型的标题,CACHE、NETWORK 和 FALLBACK。任何不在标题下的内容都会隐式设置在 CACHE 下。每个部分的解释:

CACHE:此标题下的文件将被缓存。

网络:此标题下的文件需要互联网连接,因此不会被缓存。

FALLBACK:由该标题下的模式匹配的文件(例如匹配所有文件的模式“/”)并且没有被缓存,将显示一个后备文件。

关于 Dive into HTML 5 中的代码块,下面有对“NETWORK: *”部分的解释:

这意味着,当您在线浏览这个假设的支持离线的维基百科时,您的浏览器将正常获取图像和视频以及其他嵌入式资源,即使它们位于不同的域中。(这在大型网站中很常见,即使它们不是离线 Web 应用程序的一部分。HTML 页面是在本地生成和提供的,而图像和视频是从另一个域的 CDN 提供的。)如果没有这个通配符标志,我们假设启用离线功能的 Wikipedia 在您在线时会出现奇怪的行为 - 具体来说,它不会加载任何外部托管的图像或视频!

以下引用:

它在每个页面上使用常见的 CSS、JavaScript 和图像。这些资源中的每一个都需要在 CACHE 中明确列出

意味着您必须在 CACHE 标题下的清单中包含所有必要的 CSS、Javascript 和图像文件。它与“NETWORK:*”不冲突,因为 NETWORK 标题并不意味着“缓存所有内容”。它实际上意味着相反:NETWORK 标题下的所有内容都需要互联网连接并且不应被缓存。

于 2011-01-13T08:46:12.830 回答
7

我发现了更多关于 FALLBACK 的有用信息:

经过一番试验,我尝试了各种方法,包括 FALLBACK: 中的文件是否应该出现在 CACHE 或 NETWORK 部分中。答案似乎是否定的。

例如... FALLBACK: sign-up-portrait.png offline-portrait-1.png sign-up-landscape.png offline-landscape-1.png

我最近在我的一个微型网站中指定了这一点。目的是在联机时显示 sign-up-png 文件,在脱机时显示脱机 png 文件。这很好用。特别是每行左侧的文件隐含地好像它们在网络部分中,该站点将始终尝试使它们在线。它们也不能添加到 NETWORK 部分,否则它似乎会覆盖 FALLBACK 中的内容。另外,令人高兴的是,右侧的文件隐含地添加到 CACHE: 部分中,因此即使一开始不使用它们,它们也会在首次加载时被缓存,而无需显式地将它们添加到 CACHE:尽管您可以将它们添加到那里如果你愿意,也可以。没什么区别。

对于此配置,查看网络服务器日志,我看到每次刷新页面时,apache 都会针对清单文件和该页面版本所需的注册 png 文件记录 304(有一个 CSS 媒体选择器根据页面大小确定哪个)。所以它总是正确地检查 sign-up-png 文件以及通常的清单检查,这正是我想要的。

为了彻底起见,我尝试查看根文件是否也需要位于 CACHE: 部分中。事实证明不是!如果您的顶级文件是 index.html 并且在其 html 标记中指定了清单文件,那么清单文件不需要在任何地方包含 index.html,它会被隐式缓存。

我很好奇应用程序缓存可以扩展多远。您可以包含链接到 iframe 或 iframe 中的其他 html 文件吗?还是这些都需要有自己独立的清单文件?有人愿意发表评论吗?

关于格式的旁注,不要犯我做的错误,即放入... NETWORK file1.js

缺少冒号会导致它完全崩溃,认为 NETWORK 本身就是一种资源。

它必须是......网络:file1.js

于 2012-11-03T16:28:50.050 回答