有人可以向我解释 HTML 5 的缓存 list 与使用其他文件 header 技术告诉浏览器缓存文件有何不同吗？
最佳答案
我觉得发布一个你提出的问题的答案很奇怪，评论并回答了你自己，但我认为你在这个话题上的绝对垄断将近两年就足够了。 ;)
HTML5 缓存 list 与传统 HTTP header 之间的主要区别:
- 对于缓存 list ，您需要浏览器支持
- 对于 HTTP header ，您当然还需要浏览器的支持，但它更通用
- 您可以通过缓存 list 更好地控制缓存
- 您的网站或 Web 应用程序可以在完全没有连接的情况下正常离线运行
- 您可以为每个资源拥有两个版本 - 供离线和在线使用
最后一点非常方便，可以让您轻松交换网站中需要连接的部分，例如。包含可选注释的占位符，如果没有连接或您想要的任何内容，用户将无法获得完整的功能。
有关支持，请参阅 Compatibility table for support of offline web applications in desktop and mobile browsers .毫不奇怪，IE 总是有一些问题，目前 Opera Mini 不支持它，所以我建议如果您使用缓存 list ，那么也使用传统的 HTTP header (HTTP/1.1 Cache-控制和 HTTP/1.0 过期 - 请参阅 RFC 2616 sec. 14.9.3 )。
您可以更好地控制 JavaScript 中的整个缓存过程，例如。您可以使用 window.applicationCache.swapCache() 方法强制更新网站的缓存版本，而无需手动重新加载页面。 HTML5 Rocks 上有一些不错的代码示例(下面的链接)解释了如何将用户更新到您的网站或 Web 应用程序的最新版本。
请记住，您需要为缓存 list 提供正确的 HTTP header ，特别是 Content-Type 和与缓存相关的 header ，以便您的浏览器知道它是一个缓存 list ，并且应该始终检查它是否有新版本。例如，Github 如何为 GitHub Pages 提供缓存 list :
Content-Type: text/cache-manifest
Cache-Control: max-age=0
Expires: [CURRENT TIME]
其中 [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 W3C 工作组说明
- Offline Web applications在 WHATWG
另请参阅我最近对这些相关问题的回答:
关于caching - HTML 5 缓存 list 对比。 Etags、Expires 或缓存控制 header ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3956455/