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?

Liken

For debugging purposes, you can open up the web inspector, go to the Application tab, click on Clear Storage under the Application section, and then click 'Clear site data'. Afterwards you can refresh the page as it is a clean slate. I use this on Chrome, not sure about other browsers though. – Cardholder

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.

Flavoprotein

Answer 2

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.

Mathura

Finally! I had somehow got my appcache to be cached itself so I didn't get any changes at all, but after using a incognito window I got it to start working again. Thanks! – Pamilapammi

Answer 3

"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!

Giuseppinagiustina

Beware: the manifest is downloaded with a time stamp, then the referenced files are downloaded, then the manifest is downloaded AGAIN to check that it is still the same, but of course with a new time stamp it will not be the same any more and so will throw an error. – Selfheal

@Selfheal What error is thrown, and does the browser recover? Seems a little shortsighted as any manifest update while files are being downloaded is going to throw an error, a big enough userbase and it's almost inevitable. – Ask

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

Enamel

Answer 5

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.

Ask

I'm probably way off, but I used to use 'Pragma: No-Cache' many years ago and it always worked. Not sure if that is relevant in HTML5 though. – Flashback

Pragma is off the earlier spec, should work the same, but those browsers that just support it are old and don't have HTML5 support. There should be no difference whatsoever, so I'd go for Cache-Control. – Ask

I was pretty sure it deprecated in later versions of HTML. As you say, older browsers, even newer ones might support it. But you're right using HTML5 compliant stuff would be better - even though it isn't working for the asker. This might be useful: #4225986 – Flashback

genius! this worked for me, chrome seems to also cache the manifest file it self so even changing the manifest file won't work – Poplar