在 HTML5 离线缓存中延迟加载非 HTML 页面答案

【问题标题】：Lazy loading non-HTML pages in HTML5 offline cache在 HTML5 离线缓存中延迟加载非 HTML 页面
【发布时间】：2011-09-05 22:45:28
【问题描述】：

HTML5 Offline Web application spec 给出了如何将 HTML 页面延迟加载到缓存中的示例：

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

Dive Into HTML5 以 Wikipedia 为例对此进行了解释：您当然不想在网站加载时缓存整个 Wikipedia，但您希望用户访问的任何页面都被缓存。用户在离线时访问的任何页面都应显示自定义错误页面。

这种方法的诀窍是每个 HTML 页面都明确包含清单。任何包含清单的页面都会自动包含在缓存中，无需明确提及。所以这个例子会从网络中加载HTML页面，并插入到缓存中，如果离线，缓存中的任何页面都可以工作，任何未缓存的页面都会默认为offline.html页面。

问题在于非 HTML 文件，它们无法包含清单。具体来说，我正在用 JavaScript 编写一个游戏，它有很多音乐曲目。我有以下要求：

我不希望用户在游戏加载时下载所有音乐，
如果用户在线时遇到新的音乐曲目，则应下载并缓存该曲目，
如果用户在离线时遇到新的音乐曲目，他们是否听到静音并不重要。
如果用户在离线时遇到他们已经听过的音乐曲目，则应从缓存中播放。

如果音乐文件是 HTML，我可以使用上述技术，并给它们一个 manifest=... 属性，以便在它们首次加载时将它们放入缓存中。但它们不是 HTML，所以我不能这样做。有没有办法让非 HTML 资源在加载时保存到缓存中，但不是提前？

注意：我对传统的 HTTP 缓存机制不是很熟悉。有可能可以改用它，但根据我的经验，即使文件被浏览器缓存，如果浏览器处于脱机状态，它们也不起作用。如果可以这样做，我应该如何配置缓存头？

【问题讨论】：

标签： html offline-caching cache-manifest

【解决方案1】：

这就是 Dive Into HTML5 所说的，但我在 Wikipedia 中找不到清单。维基百科并没有真正以这种方式工作。在我的 Chrome 控制台中，我找不到任何维基百科的应用程序缓存。

我想你可以试试这个：当用户完成下载音乐曲目后，通过 AJAX 将此信息发送到服务器。服务器应更新此用户的清单并将此音乐曲目放入其中。然后您可以调用applicationCache.update() 强制浏览器再次检查清单，它会发现更新。这意味着您不能使用静态清单文件。清单文件必须是动态的并且与用户相关。

【讨论】：

请注意，Dive Into HTML5 并不是暗示 Wikipedia 这样做；它只是将它用作可能以这种方式构建的网站的示例——正如它所说的“假设的离线启用的维基百科”。我觉得这个建议不会真正起作用，因为服务器会为每个用户关联缓存，但我想要每个浏览器。如果用户移动到尚未下载音乐的其他设备，我不想强制该设备下载用户看过的所有音乐。也许每个浏览器的 cookie 会有所帮助。不过，这打破了例如。如果用户清除了她的离线缓存。
客户端有什么办法可以查询缓存，查看里面有哪些文件？如果是这样，客户端可以在每个会话的基础上告诉服务器哪些音乐文件已经被缓存，服务器可以发回包含这些文件的清单。这是一个肮脏的黑客，但它至少允许客户端管理缓存，而不是强制服务器记住每个客户端的缓存状态。
每个浏览器和每个用户是一样的。它们都依赖于 cookie。
您可以通过 AJAX 获取文件，并且您可以知道下载完成的时间。我认为问题在于，如果您在下载完成后更新清单，浏览器可能已经从其缓存中删除了此下载。
不，它们不一样。每个用户取决于存在于不同 cookie 会话中的用户配置文件。但是点了。但这仍然不是一个好的解决方案，因为它要求服务器记住存储在客户端上的内容，当客户端是客户端时，这似乎是错误的，但无法记住自己的缓存。不过，谢谢你的建议。由于没有其他人提出任何建议，我会给你打勾。

【解决方案2】：

看起来 Mozilla 完全有解决方案，但它只适用于 Firefox：nsIDOMOfflineResourceList（我不知道为什么这么叫；这些方法适用于 applicationCache 对象）有方法 mozAdd 和 @ 987654324@ 允许您使用 JavaScript 将对象动态添加到缓存中。

希望这成为标准的一部分（如add 和remove）；那么这将是解决此问题的正确方法。

【讨论】：