HTML 5缓存清单.Etags,Expires或缓存控制标头

Question

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

Answer 1

我觉得很奇怪,你回答了一个你问的问题的答案,评论并回答了你自己,但我认为你在这个话题中绝对垄断的近两年就足够了.;)

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

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

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

有关支持,请参阅兼容性表以获取桌面和移动浏览器中的脱机Web应用程序支持.毫不奇怪,IE总有一些问题,目前Opera Mini不支持它,所以我建议如果你使用缓存清单那么也要使用传统的HTTP头(HTTP/1.1 Cache-Control和HTTP/1.0 Expires -参见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上使用应用程序缓存的初学者指南
• 在Mozilla Developer Network上使用应用程序缓存
• 在Wikipedia上的HTML5中缓存清单
• 离线Web应用程序 W3C工作组注意
• WHATWG的离线Web应用程序

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

• 强制浏览器清除缓存
• 在github页面上确定页面已过时