How to Update Application Cache Programmatically in HTML5?

Last day we discussed on “Faster and Offline Browsing using Application Cache in HTML5” and mentioned detailed steps to implement the Application Cache in HTML5. Also, we discussed a bit about refreshing the cache.

Today in this post, we are going to discuss a topic by which you can update it programmatically. So, let’s continue to focus on it.

HTML5 supports ApplicationCache by which your web application can remain cached for offline browsing. Developer can mark the files to be cached. This way your web app will be faster and available offline. Last day we discussed this topic. If you didn’t read it earlier, I will suggest you to read “Faster and Offline Browsing using Application Cache in HTML5” before starting with this post as it will give you clear idea on that topic.

How to check the Status of Application Cache?

Before starting with updating the cache, we need to know the current status. The “window.applicationCache” returns the current status. There are few result sets to that: “UNCACHED”, “IDLE”, “DOWNLOADING”, “UPDATEREADY”, “OBSOLETE”. Based on this status, you can proceed with your next steps.

Here is the sample code which you can use:

var applicationCache = window.applicationCache;
 
switch (applicationCache.status) {
  case applicationCache.UNCACHED: // UNCACHED = 0
    return 'UNCACHED';
    break;
  case applicationCache.IDLE: // IDLE = 1
    return 'IDLE';
    break;
  case applicationCache.CHECKING: // CHECKING = 2
    return 'CHECKING';
    break;
  case applicationCache.DOWNLOADING: // DOWNLOADING = 3
    return 'DOWNLOADING';
    break;
  case applicationCache.UPDATEREADY:  // UPDATEREADY = 4
    return 'UPDATEREADY';
    break;
  case applicationCache.OBSOLETE: // OBSOLETE = 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};

Next step of this would be updating the cache where you will need the above code to check whether the cache is ready with update, whether it is downloading the new cache etc.

How to Update the Application Cache Programmatically?

In last post, we read 3 ways of updating the browser cache in HTML5 and they are as follow:

1. Update the manifest file which will automatically fire update query by the browser
2. Delete the browser cache manually by the user and it will refresh the whole cache
3. Programmatically update the cache

Let’s start discussing on the main topic and update the browser cache programmatically. To begin with, get the handle of the window.applicationCache and fire the update() method to take an attempt to update the cache as shown in the below code snippet:

var applicationCache = window.applicationCache;
 
applicationCache.update(); // Take an attempt to update the user's cache.
...
...
if (applicationCache.status == window.applicationCache.UPDATEREADY) {
    applicationCache.swapCache();  // The fetch was successful, swap to the new cache.
        if (confirm('A new version of this site is available. Do you want to load it?')) {
            window.location.reload();
        }
}

Now check the status of the update. If it is ready for update, go ahead and swap the cache to reload the new manifest. Then reload the page with the latest files. You can confirm this reload of browser page from the user and refresh it. If no update is there, you can skip this steps.

End Note

I hope, this post will be useful for you building and updating the application cache in HTML5 web application. Let me know if this information was helpful. For more articles on various topics, subscribe to my blog’s RSS feed and email newsletter to get the update immediately to your inbox.

I am very active in social networking sites on technology updates and discussions. Connect with me on Twitter, Facebook and Google+ to have a short technical discussion or technical updates. Have a great day. Cheers.