HTML 5 Cache: window.applicationCache.abort(); doesn't work

Question

i'm working on a little mobile WebApp with an offline mode. Is there any way to prevent the automatically updating if the manifest file has changed? If the user has a bad internet connection, he shouldn't be forced to download all the files but should get a little message so he can update the files later.

I tried

window.addEventListener('load', function(e) {    
  window.applicationCache.addEventListener('ondownloading', function(e) {
      window.applicationCache.abort();
  }, false);
}, false);

But it doesn't work. Neither in Safari 6.0.2 nor in Chrome Canary.

The app should only update the files when the user clicks my "update"-button manually with this code:

var appCache = window.applicationCache;
appCache.update();

if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  // The fetch was successful, swap in the new cache.
}

Answer 1

You don't need to wrap your downloading addEventListener call in a window load event, the applicationCache object is there from the start.

You're listening for a ondownloading event, but there isn't an event named that, you don't need the on.

However, you probably want to catch the update process a bit sooner, via the checking event. You don't have to call abort either, as the checking event is cancelable.

var blockUpdates = true;

window.applicationCache.addEventListener('updating', function(event) {
    if (blockUpdates) {
        event.preventDefault();
    }
}, false);

function updateButtonPressed() {
    blockUpdates = false;
    window.applicationCache.update();
}

window.applicationCache.addEventListener('updateready', function() {
    // but what do we do here?
}, false);

But what should you do when you've got an update? swapCache will use the updated cache, but only for new requests, chances are you've already got the older files on the page. The easiest way to replace old assets with new, is to reload the page. You could do this automatically, but it may be disruptive to the user, better to tell them there's an update ready, and provide a button to reload the page.