Using HTML5 Application Cache for Offline Storage

Using HTML5 Application Cache for Offline Storage

How it is for consecutive access of your webpages if the user don’t need to send a request to the server? Here I mean to say “we can keep a local copy in the client machine/browser so for consecutive accesses browser will take the data from the local Copy”. This is what HTML5 Application Cache do in HTML5. Advantages of using Application Cache are Offline Browsing, Speed & Reduced Server Load.

Google Chrome 4.0, Internet Explorer 10.0, Mozilla Firefox 3.5, Safari 4.0, Opera 12 & all the above versions Supports HTML5 Application Cache.

What is a Manifest file?

Generally this file comes with the extension “.appcache”. To enable Application Cache for your page you need to declare manifest in html tag.

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest file is simple text file. You can create this using Notepad. It has 3 sections Cache Manifest, Network & Fallback.

demo.appcache

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Cache Manifest

File listed under this block will immediately cache after they downloaded for the first time. Generally images, Static HTML, Common used JS & CSS files we kept in Cache Manifest. This technique gives offline browsing as well better performance.

Network

File listed under this block will never Cache. For Consecutive requests these file required server connection.

Fallback

Files listed under this block specifies fallback pages if a page is inaccessible.