Force applicationCache to reload cached files

Question

I'm using the HTML5 applicationCache to store many Javascript, CSS, image, etc. files for a page. If I update one of those files, the browser never reloads it. I have tried the following:

• Calling applicationCache.update() on page load
• Listening for applicationCache's updateready event, and calling swapCache() and window.location.reload()
• Adding a timestamp comment to the manifest file itself to force the browser to realize the manifest has changed

Surely this can't be this hard. How do I convince the browser to re-request some cached file?

Answer 1

To force any new (or changed) file to be downloaded, you must update the manifest file (add a version number comment or any change will do). What's probably happening is that you're getting an error. The most common one is that you might not be serving the manifest with the right mime type (text/cache-manifest). Did you configure your server correctly? The easiest way to check this is to open the page in Chrome and look in the console and the resources tab under AppCache to see if there is an error (it will complain about the file being served up incorrectly. You can also test it with the curl -I command:

curl -I $manifest_file_URL

It is also possible that your manifest file is getting cached (you can set the expires headers for it to expire rightaway). Also keep the reloading sequence in mind: your page will load from AppCache first (if it is there), then the browser checks if the manifest file is updated. If it is, download and place in the new version of the cache, but this will not automatically update the page (nor will swapCache()), you will have to refresh the page (at least) once more.

See also this presentation for more information on the topic.