Sunday, March 4, 2012

How to inhibit caching AppCache manifest.?

Hi all,

   So I am back with some new stuff related to HTML5's fantastic feature called Application Cache or sometimes also referred to as AppCache.

   Application Cache is one of those crazy features which, when I read about it, once again, drove me insane about internet and technology.

A bit of what AppCache is: AppCache is a HTML5 feature which allows chosen resources to be cached entirely into the users browser. Whenever the user visits your website next time, the resources are served from the Application Cache rather than making a HTTP request and fetch them from the server.

This feature can be used to greatly enhance the performance of the web application and save users bandwidth. All static resources like images, css and javascript libraries are suggested to be cached.

  There is a manifest file which specifies which files to be cached in the users browser. The scenario may get worse if the manifest file itself is cached at the users end. So its of utmost importance that user's browser always requests the manifest file to the server. I have listed 2 ways to force the user's browser to do so.

   Imagine the case when the manifest remains cached into the users browser. Whenever the user visits your website, all the resources are served to him from the Application Cache and no request is made to the web server to fetch the changed/updated resources. And this goes on and on until the user the user clears the cache. And you would not like your users to take this hassel, will you? On mobile devices, this scenario gets very difficult to detect and debug.

So I did some web research and found out 2 ways to inhibit caching of manifest file into the users browser.

1. Setting 'Expires' HTTP response headers to least possible time.
- url: /(.*\.(appcache|manifest))
  static_files: \1
  mime_type: text/cache-manifest
  upload: (.*\.(appcache|manifest))
  expiration: "0s"
Explanation: For those who are new to this, in simple language, 'Expires' is a field in HTTP response from the server. 'Expires' tells the client browser that the particular file should be server from the browser cache, until it is as old as the time specified. So in this case, if we set the time to 0 second, whenever the user visits your website, his browser will make a request for a new manifest file and discard the one already in the browser cache.


2. This is the other way to request the manifest file to the server every time your website is visited, but I will not recommend this approach, as it interrupts user and asks to refresh the page.
window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);
Explanation: When the user visits your website, the resources are downloaded in the background after the page is loaded. When the user visits the same website again, the resources are loaded from the AppCache and the resources which are changed on the server are downloaded in the background. To see these resources, thus, user must refresh the page. The above code forces the user to refresh the page programmatically

4 comments:

  1. I usually don’t comment on blogs but this blog inspired me to make one compliment as I know it’s not enough for the meaningful context in your writing as one could understand it easily, will refer this blog to my friends to gather such informative insights.

    ReplyDelete
  2. Thanks a lot man, I like simplicity in understanding.
    :)

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...

Share This

Share |