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.

Answer 2

for your manifest file set your HTTP header for

'Cache-Control' to 'no-store'

add a Content-Type for .manifest of

'text/cache-manifest'

That should do it, otherwise the browser is going to cache the manifest itself for whatever cache default you have set, so requests to check the manifest are going to retrieve a cached copy.

After that then change a character in the manifest file and the next request should fetch a fresh manifest.

You don't say what server you're running, but I did this for files hosted out of an S3 bucket and that did the trick, S3 normally caches for 24 hours.

Answer 3

With Google Chrome, if you're just doing this while debugging, there's a simple workaround: use an incognito window. When you change something in your cache, close the incognito window (if you have more than one, make sure you close all of them), reopen it and go to your application. This will now download from clean, including all your changed files.

It's a slightly nuclear option, since it will destroy all your stored data, but it works fine for me during the process of tidying up CSS, for example.

For some reason, clearing Chrome's page cache with "Clear Browsing Data" doesn't seem to work.

Answer 4

I struggled with this for a while. For me the key was getting mime type and caching headers right via nginx.

in /etc/nginx/mime.types:

text/cache-manifest                   manifest appcache;

in /etc/nginx/nginx.conf:

      # If the file exists as a static file serve it directly
      if (-f $request_filename) {
        expires -1;
        break;
      }

The expires -1 line causes the cache header to be set to no-cache.

Also, to clear the cache in Firefox 23 I used:

• Firefox->Options->Options->Advanced->Network: Offline Web etc->Clear Now

And to see what was being fetched from the server or not:

• Firefox->Web Options->Tools->Network tab

Answer 5

"you’ll need to change the cache manifest file itself. This can be as simple as changing a single character" that work for me thanks!