在HTML5脱机缓存中延迟加载非HTML页面

Question

HTML5 Offline Web application spec举例说明了如何将HTML页面延迟加载到缓存中：

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

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

这种方法的技巧是每个HTML页面都明确包含清单。包含清单的任何页面都会自动包含在缓存中，而不必明确提及。因此，此示例将从网络加载HTML页面，并将其插入缓存中，如果脱机，缓存中的任何页面都将起作用，并且任何非缓存页面都将默认为offline.html页面。

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

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

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

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

Answer 1

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

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

Answer 2

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

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