HTML5 离线缓存中延迟加载非 HTML 页面
HTML5 离线 Web 应用程序规范< /a> 给出了如何将 HTML 页面延迟加载到缓存中的示例：
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
深入了解中对此进行了解释HTML5 以维基百科为例：您当然不希望在网站加载时缓存整个维基百科，但您希望缓存用户访问的任何页面。用户离线时访问的任何页面都应显示自定义错误页面。
这种方法的技巧是每个 HTML 页面都显式包含清单。任何包含清单的页面都会自动包含到缓存中，而无需明确提及。所以这个例子将从网络加载HTML页面，并将它们插入到缓存中，如果离线，缓存中的任何页面都将工作，任何非缓存页面将默认为offline.html页面。
问题出在非 HTML 文件上，它们无法包含清单。具体来说，我正在用 JavaScript 编写一个游戏，它有很多音乐曲目。我有以下要求：
- 我不希望用户在游戏加载时下载所有音乐，
- 如果用户在线时遇到新的音乐曲目，则应下载并缓存该曲目，
- 如果用户遇到新的音乐离线时播放音乐，即使他们听到静音也没关系。
- 如果用户在离线时遇到他们已经听过的音乐曲目，则应该从缓存中播放它。
如果音乐文件是 HTML，我可以使用上述技术，并给它们一个 manifest=... 属性，以便在首次加载时将它们放入缓存中。但它们不是 HTML，所以我不能这样做。有没有办法让非 HTML 资源在加载时保存到缓存中，而不是提前保存？
注意：我对传统的HTTP缓存机制不是很熟悉。可能可以使用它来代替，但根据我的经验，即使文件被浏览器缓存，如果浏览器离线，它们也不起作用。如果可以这样做，我应该如何配置缓存头？
The HTML5 Offline Web application spec gives an example of how to lazily load HTML pages into the cache:
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
This is explained in Dive Into HTML5 with the example of Wikipedia: You certainly don't want to cache the entire of Wikipedia when the website loads, but you want any page the user visits to become cached. Any page the user visits while offline should display a custom error page.
The trick of this approach is that each HTML page explicitly includes the manifest. Any page that includes the manifest is automatically included into the cache, without having to be explicitly mentioned. So this example will load HTML pages from the network, and insert them into the cache, and if offline, any page in the cache will work, and any non-cached page will default to the offline.html page.
The problem is for non-HTML files, which have no ability to include the manifest. Specifically, I am writing a game in JavaScript and it has a bunch of music tracks. I have the following requirements:
- I don't want the user to have to download all the music when the game loads,
- If the user encounters a new music track while online, that track should be downloaded and cached,
- If the user encounters a new music track while offline, it doesn't matter if they hear silence.
- If the user encounters a music track that they have already heard while offline, it should be played from the cache.
Were the music files HTML, I could have used the above technique, and given them a manifest=... attribute to get them into the cache when they are first loaded. But they are not HTML, so I can't do that. Is there any way to get non-HTML resources to be saved to the cache when they are loaded, but not ahead of time?
Note: I'm not very familiar with the traditional HTTP caching mechanism. It's possible that it can be used instead, but in my experience, even if files are cached by the browser, they don't work if the browser is offline. If it's possible to do it this way, how should I configure the cache headers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Dive Into HTML5 就是这么说的，但我在维基百科中找不到清单。维基百科实际上并不是这样运作的。在我的 Chrome 控制台中，我找不到维基百科的任何应用程序缓存。
我想你可以尝试这个：当用户完成下载音乐曲目时，通过 AJAX 将此信息发送到服务器。服务器应该更新该用户的清单并将该音乐曲目放入其中。然后，您可以调用 applicationCache.update() 来强制浏览器再次检查清单，它将发现更新。这意味着您不能使用静态清单文件。清单文件必须是动态的并且与用户相关。
That's what Dive Into HTML5 said, but I couldn't find the manifest in Wikipedia. Wikipedia doesn't really work in this way. In my Chrome console, I couldn't find any application cache of Wikipedia.
I think you can try this: When the user has finished downloading a music track, send this info to the server via AJAX. The server should update the manifest for this user and put this music track in it. Then you can call
applicationCache.update()to force the browser to check the manifest again and it will discover the update. This means you can't use a static manifest file. The manifest file has to be dynamic and related to user.看起来 Mozilla 确实有解决方案，但它只适用于 Firefox： nsIDOMOfflineResourceList （我不不知道为什么这么称呼；这些方法适用于
applicationCache对象）具有方法mozAdd和mozRemove，它们允许您使用 JavaScript 动态地将对象添加到缓存中。希望这成为标准的一部分（如
add和remove）；那么这将是解决这个问题的正确方法。It looks like Mozilla has exactly the solution, but it only works in Firefox: nsIDOMOfflineResourceList (I don't know why it's called that; these methods apply to the
applicationCacheobject) has methodsmozAddandmozRemovewhich allow you to dynamically add objects to the cache using JavaScript.Hopefully that becomes part of the standard (as
addandremove); then that would be a proper solution to this issue.