HTML 5 缓存清单与。 Etags、Expires 或缓存控制标头答案

【问题标题】：HTML 5 Cache Manifest Vs. Etags, Expires or cache-control headerHTML 5 缓存清单与。 Etags、Expires 或缓存控制标头
【发布时间】：2011-04-26 18:25:28
【问题描述】：

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

【问题讨论】：

这是一个想法：我“相信”常规磁盘缓存和新的 html5 离线缓存之间的主要区别在于，当离线工作（或没有互联网连接）时，不会使用传统磁盘缓存或可用于呈现页面，而离线缓存将。

标签： caching html

【解决方案1】：

我觉得很奇怪发布一个你提出的问题的答案，评论和回答了你自己，但我认为你在这个话题上的绝对垄断近两年就足够了。 ;)

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

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

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

有关支持，请参阅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 Pages 提供缓存清单：

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 Rocks 上
Using the application cache Mozilla 开发者网络
维基百科上的Cache manifest in HTML5
Offline Web ApplicationsW3C 工作组说明
Offline Web applications WHATWG

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

【讨论】：

这不是我们应得的答案，而是我们需要的答案。 +1
听起来 HTML 5 应用缓存是一个小众的东西。我制作的所有 Web 应用程序都不会在离线模式下发挥很大作用，因为每个请求通常都会导致对频繁更改的数据库的查询。缓存静态文件（如 JavaScript、图像和 CSS）已经由 HTTP 响应标头处理得很好。即使有一点点好处，对于极其罕见的场景，也绝对不值得付出巨大的努力。

【解决方案2】：

我“相信”常规磁盘缓存和新的 html5 离线缓存之间的主要区别在于，当离线工作（或没有互联网连接）时，传统的磁盘缓存不会用于或无法用于呈现页面，而离线缓存会。

【讨论】：