Search code examples
htmloffline-cachingcache-manifest

Lazy loading non-HTML pages in HTML5 offline cache

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?

Solution

  • 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.