HTML5: Application Cache

Hello all, not much time to talk about. Here straight way we goto the tutorial of HTML5 Application Cache. I hope u know what it is and how useful it is, if not, I will tell you in short.

Application Cache or AppCache is HTML5 feature using which whole or a part of website can be made available offline. It has following great advantages.

  • Make your web apps available offline.
  • Load your web apps faster.
  • Reduce the server load.
  • Save bandwidth.
There are some changes to be made on server in order to provide support for AppCache.
   If you are using Apache, LAMP, WAMP, MAMP or any other server based on Apache, follow the steps below.
1. Goto appropriate installation directory or search for httpd.conf file.
2. Add ‘AddType text/cache-manifest .appcache’ to it and save the file.
3. Restart the server.Or if you are using Google App Engine. Put the following code in your app.yaml file.

- url: /mystaticdir/(.*\.appcache)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.appcache)

Now you are set to use AppCache for the content hosted from this server.

Download the AppCache Demo Project from here and open index.html

Use Google Chrome to study this sample application. In Chrome browser press ‘Ctrl+Shift+I’ to open Chrome Developer Tools and click on resources tab. When the index.html downloaded from the above project is loaded in the browser. You should see something link as shown in the picture.

cached resource from your localserver

Now just open the cache manifest file and change the version no. in it. Make some change to the already cached files and click refresh in the browser. The newly changed file is cached again.

Application Cache can be used by mobile phones also to make web apps more responsive. Android 2.2 and above supports HTML5 Application Cache.

Update: You can check out what has been cached and what not in your Chrome browser by typing ‘chrome://appcache-internals’ in the address bar.

Update: If you want to check support for various HTML5 features in your browser, you can use the following Apps.

Chrome App
Android App

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 your web server. And this goes on and on until the user will not clear the cache. And you wont want 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 webiste, his browser will make a request for a new manifest file and discard the one in the browser cache.

2. This is the other way to request the manifest file to the server everytime your website is visited, but I wont 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 this resources, thus, user must refresh his page. The above code forces the user to refresh the page programmatically

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s