Thursday, August 25, 2011

HTML5 Application Cache Tutorial

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

No comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...

Share This

Share |