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.
}

score 2 · Answer 1 · answered Jul 28 '14 at 20:30

Jaffa's answer does not work. (at least in chrome).

The appcache will automatically update no matter what we do, so the only way to control when the client gets updates from the server is to manage each cache manifest on a per-client (per browser) basis.

The browser will need to create a BrowserID GUID and store it in localStorage. When it requests the cache manifest, it should include the browserID in the URL. When the server sends the cache manifest, it caches it on the server side. Each subsequent request for the manifest returns the cached version.

When the user presses the Sync button, the browser sends a Cache Bust request including the browser ID. This causes the next Cache Manifest request with that BrowserID to return the updated Manifest, not the cached version.

score 1 · Accepted Answer · answered Dec 13 '12 at 14:13

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.

The above is according-to-spec, I haven't tested it in a browser. — JaffaTheCake, Dec 13 '12 at 14:24

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

2 Answers2