HTML 5缓存清单与ETag、过期或缓存控制头

我觉得很奇怪,把你问的问题的答案贴出来,评论道 和 回答你自己,但我认为,近两年你在这个问题上的绝对垄断已经足够了。;)

HTML5缓存清单与传统HTTP头文件的主要区别:

• 对于您需要在浏览器中支持的缓存清单
• 当然,对于HTTP头,您也需要浏览器中的支持,但它更通用
• 您的网站或Web应用可以在完全没有连接的情况下正常脱机工作
• 每个资源都可以有两个版本-供脱机和联机使用

最后一点是非常方便的,让你很容易地交换你的网站需要连接的部分,例如占位符包含可选的评论,如果没有连接或你想要的任何东西,用户无法获得完整的功能。

Compatibility table for support of offline web applications in desktop and mobile browsers . 毫不奇怪IE有一些问题,如总是,目前Opera Mini不支持它,所以我建议如果您使用缓存清单,然后 使用传统的HTTP头(HTTP/1.1缓存控制和HTTP/1.0过期-请参阅 RFC 2616 sec. 14.9.3

您可以在JavaScript中更好地控制整个缓存过程,例如,您可以使用window.applicationCache.swapCache()方法强制更新网站的缓存版本,而无需手动重新加载页面。上面有一些很好的代码示例 HTML5 Rocks (以下链接)解释如何将用户更新到网站或Web应用程序的最新版本。

请记住,您需要为缓存清单提供正确的HTTP头,特别是与缓存相关的内容类型和头,以便您的浏览器知道它是缓存清单,并且应该始终检查它是否有新版本。例如,Github如何为Github页面提供缓存清单:

Content-Type: text/cache-manifest
Cache-Control: max-age=0
Expires: [CURRENT TIME]

其中[当前时间]是正确格式的当前GMT时间(请参见 RFC 2616 sec. 3.3 ).

以下是一些可以帮助您入门的资源:

• A Beginner's Guide to Using the Application Cache 在HTML5岩石上
• Using the application cache 在Mozilla开发者网络上
• Cache manifest in HTML5 论维基百科
• Offline Web Applications
• Offline Web applications 在WHATWG

另请参阅我最近对这些相关问题的回答:

• Force browser to clear cache
• Determining a page is outdated on github pages

我“相信”普通磁盘缓存和新的html5脱机缓存的主要区别在于,当脱机工作(或没有internet连接)时,传统的磁盘缓存将不用于或不可用于呈现页面,而脱机缓存将。