itSpice














Offline Application Caching in HTML 5

Blog post by Swati Bansal

html5-logo
Well, to ensure the website is available with the user or not, even if they are not connected is relatively very simple. The mechanism to find out this thing is easy and has been detailed in the follwing text. Firstly you need to specify the ‘manifest’ attribute on HTML element.

To do offline aaplication caching in HTML 5, you need an attribute which takes a URI to the manifest that holds the rules for caching. In general, cache manifest has 3 section headers :-

  1. CACHE
  2. NETWORK
  3. FALLBACK

It is to be noted that the MIME type of the manifest file is text / cache-manifest. For whichever web server you are using, you may require to add a custom file type extension binding to Apache or just specify the MIME type, for instance using the PHP header directive. After loading of files will be completed, files enlisted under CACHE will be cached. While the other ones which are enlisted under NETWORK will be sdb white listed.

This intends that they need a live connection to the server. More else, if the user is not connected with the server, the browser must not use any cached version. Now, the last section header, FALLBACK has been comprised with entries, which renders back up strategy. If in any case, the browser is not able to retrieve the original text and content, at that time FALLBACK resource will be used.

In the manifest section, any line beginning with # has been regarded as a comment. Apart from increasing the readability of the code, comments have another benefits too in the manifest. For example, if you have to specify that masthead.png must be cached, but you have updated the image. What happens now, cache will gets updated only when the manifest changes and the user will continue to see the old image that was cached. You can also do this by modifying part of the manifest, but a more better way of doing this is increment the version number everytime you updae a resource.


Tags: [ , , , ]


Related Posts


Comments