HTML5缓存清单:后备部分和网络*

Question

从Dive到HTML5:Cache Manifest:Fallback部分

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

我不明白这个代码块究竟做了什么的URL.回退部分的意思是什么时候找不到任何东西,显示offline.html页面

然后network: *所有资源都将被缓存？它也说

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

这似乎冲突到network: *它似乎说缓存一切？

Answer 1

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

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

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

FALLBACK:此标题下的模式匹配的文件(例如模式"/",匹配所有文件)并且尚未缓存,将显示一个后备文件.

关于从Dive到HTML 5的代码块,下面是"NETWORK:*"部分的解释:

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

以下引用:

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

意味着您必须在CACHE标题下的清单中包含所有必需的CSS,Javascript和图像文件.它不与"网络:*"冲突,因为网络标题就不是意味着"缓存的一切".它实际上意味着相反:NETWORK标题下的所有内容都需要互联网连接,不应缓存.

Answer 2

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

经过一些实验,我尝试了各种各样的事情,包括FALLBACK中的文件是否应该出现在CACHE或NETWORK部分中.答案似乎是否定的.

作为示例... FALLBACK:sign-up-portrait.png offline-portrait-1.png sign-up-landscape.png offline-landscape-1.png

我最近在我的一个微观网站上指定了这个.目的是在线时显示sign-up-png文件,在离线时显示offline-png文件.这很好用.特别是每行左侧的文件隐含地好像它们在NETWORK部分中一样,该站点将始终尝试使它们联机.它们也不能添加到NETWORK部分,否则它似乎会覆盖FALLBACK中的内容.另外,幸运的是,右边的文件隐含式地好像是在CACHE:部分中添加的,所以即使它们最初没有被使用,它们也会在第一次加载时被缓存,而不必将它们显式地添加到CACHE:尽管你可以在那里添加它们你也想要.没什么区别.

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

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

我很好奇app缓存可以扩展多远.你能包含链接到或在iframe中的其他html文件吗？或者那些都需要拥有自己独立的清单文件？有人评论吗？

关于格式的侧面评论,不要犯我做的错误,这是放入... NETWORK file1.js

缺少冒号导致它完全破裂,认为NETWORK本身就是一种资源.

它必须是...... NETWORK:file1.js