Cache manifest manual updates

Question

I want to provide users the ability to choose whether or not they want to update my Web app. From my research, cache manifest automatically fires the "downloading" event as soon as it finds a modified appcache file. The goal is to maintain this behavior if the user loads my app for the first time, but if the user already has an older version on cache, he or she would receive the confirm box:

An update is available. Do you want to download it?
Ok
Cancel

Clicking "Ok" would fire the "downloading" event, while clicking "Cancel" would fire the "noupdate" event instead, skipping the download.

How can I do this?

Answer 1

I don't believe that the exact behavior you are looking for is possible.

Since JavaScript is effectively loaded into the page, it will always execute after (or while) the appcache magic is happening.

The first time a user visits the page, the browser would see that there is a manifest attribute. The page and all server-resources would continue loading normally, and the browser would download and cache all resources specified in the manifest file in the background.

The next time the user visits the page, it first checks to see if the manifest has updated or any caching headers for the manifest have expired. If the manifest is new, it will download the updated cache and present the user with the old version. The new version won't be presented until the user refreshes the page. So, by the time the page loads and you prompt the user, the new appcache has already been downloaded.

Try this experiment. Create a bare-bones simple html page with a cache manifest. Include the following in the header:

<script>
var cache = window.applicationCache,
    handleEvent = function(event) {
        console.log("appcache event fired.");
    };

cache.addEventListener('checking', handleEvent);
cache.addEventListener('downloading', handleEvent);
cache.addEventListener('progress', handleEvent);
cache.addEventListener('cached', handleEvent);
cache.addEventListener('noupdate', handleEvent);
cache.addEventListener('updateready', handleEvent);
cache.addEventListener('obsolete', handleEvent);
cache.addEventListener('error', handleEvent);

</script>

Watch the Chrome developer console. Notice that all the event handlers here fire after Chrome logs the browser's build-in event handlers.

What you could try is detect on the server that the cache-manifest has changed. If that is the case, instead of directing the user to the main page, redirect to a different page that will contain the prompt. If the user wants the updated version, continue as normal. If not, you will need to intercept the request for the app-cache and return a 304 (Not Modified).

This is an excellent resource.