HTML 5缓存清单。 Etags，Expires或缓存控制标头

Question

有人可以向我解释HTML 5的缓存清单与使用其他文件头技术告诉浏览器缓存文件有何不同？

Answer 1

我对你提出的问题的回答感到奇怪，评论和自己回答，但我认为你在这个话题中绝对垄断的近两年就足够了。 ;）

HTML5缓存清单与传统HTTP标头之间的主要区别：

• 您需要在浏览器中支持缓存清单
• 对于HTTP标头，您当然也需要浏览器支持，但它更通用
• 您可以通过缓存清单
更好地控制缓存
• 您的网站或网络应用可以脱机正常工作，完全没有连接
• 您可以拥有每个资源的两个版本 - 用于离线和在线使用

最后一点非常方便，让您轻松交换需要连接的网站部分。包含可选注释的占位符，如果没有连接或任何您想要的内容，用户将无法获得完整功能。

有关支持，请参阅Compatibility table for support of offline web applications in desktop and mobile browsers。毫不奇怪，IE有一些像往常一样的问题，目前Opera Mini不支持它，所以我建议如果你使用缓存清单，那么也使用传统的HTTP头（HTTP / 1.1 Cache-）控制和HTTP / 1.0过期 - 请参阅RFC 2616 sec. 14.9.3）。

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

请记住，您需要使用正确的HTTP标头提供缓存清单，特别是与缓存相关的Content-Type和标头，以便您的浏览器知道它是缓存清单，并且应始终检查新版本。例如，这是Github如何为GitHub页面提供缓存清单：

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

其中[CURRENT TIME]是格式正确的当前GMT时间（见RFC 2616 sec. 3.3）。

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

关于HTML5 Rocks的
• A Beginner's Guide to Using the Application Cache
• Using the application cache在Mozilla开发者网络上
维基百科上的
• Cache manifest in HTML5
• Offline Web Applications W3C工作组注意事项
WHATWG
• Offline Web applications

另见我最近对这些相关问题的回答：

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

Answer 2

我相信常规磁盘缓存和新的html5脱机缓存之间的主要区别在于，当脱机工作（或没有Internet连接）时，传统的磁盘缓存将不会被用于或不可用于呈现页面，而离线缓存会。