AppCache: Resources won't reload

Question

When I update my manifest, and load the page, then I checked on Developer tools the scripts that I've changed. It's not there. I always need to clear my browser cache in order for it to be loaded. I have a listener for updating cache:

$(function() {    
    if (window.applicationCache) {
    applicationCache.addEventListener('updateready', function() {        
        console.log("appcache updated");
            window.location.reload();

    });
    }
}

Answer 1

There are quite a few gotchas when working with the AppCache.

The first thing I would suggest is to add the swapCache method to your code above. E.g.

   $(function() {    
     if (window.applicationCache) {
       applicationCache.addEventListener('updateready', function() {        
         if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
           window.applicationCache.swapCache();
           console.log("appcache updated");
           window.location.reload();
         }
       });
     }
   }

Here are a few other things to look out for:

• make sure updating your manifest file when you're changing code (it sounds like you're doing this)
• add javascript handlers to all the applicationEvents to help with debugging. Take a look at the bottom of this http://www.html5rocks.com/en/tutorials/appcache/beginner/ for some code. In fact, read this whole page and make sure you get it. Pay close attention to any errors.
• note that even if your manifest changes, it doesn't mean that the browser will automatically get the latest version of the files. It will attempt to request then but may still retrieve them from the normal cache. This can be avoided by setting caching headers. See HTML5 Offline Appcache Updates Not Showing In Firefox.

There are also quite a create answers to AppCache questions elsewhere on stackoverflow.

If these don't help, perhaps post up some code and we can work it out.