2

HTML5 Offline Web 应用程序规范提供了一个如何将 HTML 页面延迟加载到缓存中的示例：

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

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

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

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

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

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

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

4

2 回答 2

2

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

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

于 2011-06-01T12:38:15.400 回答
1

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

希望这成为标准的一部分（as addand remove）；那么这将是这个问题的适当解决方案。

于 2011-06-03T01:45:44.753 回答