Updating the cache

Simply changing a file that is stored in a user’s application cache is not enough to get that new version of the file delivered to the user.The only way a browser checks for updated versions of files is if the manifest file changes.

When a browser loads a site for which it already has a cache.manifest file, it will check to see if the manifest file has changed. If the cache.manifest file has changed, the browser will rebuild the application cache by re-downloading all the specified files otherwise it won’t download anything else.

This is why we specified a version number in a comment in our cache.manifest.

Refresh the cache

If the browser sees during page load that the manifest file has changed, it still lets the current page load continue immediately, and then asks for the updated files to be loaded in the background, to be ready for the next page load.

Fortunately, the browser provides a JavaScript API to help: the applicationCache interface.

Using this interface, you can detect that a new set of application Cache contents has been fetched and is now available, and force them to be applied to the application cache right away, rather than on the next page load:

To load the newly downloaded cache into memory, you can use the applicationCache.swapCache()

snippet

var cache = applicationCache;
cache.addEventListener("updateready", function() {
    if (cache.stats == cache.UPDATEREADY) {
        cache.swapCache(); // swap in the new cache items
    }
}, false);

[OR]

applicationCache.onUpdateReady = function() {
    // the cache manifest has changed, let’s tell the user to

    notifyUserOfUpgrade();
};

applicationCache.onUpdateReady = function() {
    applicationCache.swapCache();
    // the cache manifest has changed, let’s tell the user to

    notifyUserOfUpgrade();
};

This makes the new application cache items available for any further uses during the current page lifetime.

However, any places where the resources were already used on the page are not updated. So the cleanest way is to force the entire page to be updated with the new resource versions by simply reload the page.

Ask the user if they want to reload the page, like this:

snippet

var cache = applicationCache;
cache.addEventListener("updateready", function() {
    if (cache.stats == cache.UPDATEREADY) {
        if (confirm("This site has been updated. Do you want to reload?")) {
            location.reload();
        }
    }
}, false);

Some sites are designed to be long-lived, with little or no page reloads, in which case, getting updates requires special handling.

To force the browser to do a check for an updated cache.manifest file, which if modified then force fetching of any new appcache contents, you can call the update() API method:

snippet

function updateAppcache() {
    var cache = applicationCache;
    cache.update(); // check to see if the cache manifest file has been updated
    cache.addEventListener("updateready", function() {
        if (cache.stats == cache.UPDATEREADY) {
            if (confirm("This site has been updated. Do you want to reload?")) {
                location.reload();
            }
        }
    }, false);
}