HTML5 Application Cache for Offline Storage

Posted by on in PHP

HTML5 is latest version of HTML. HTML5 adds number of new elements and attributes that reflect typical usages of modern website. HTML5 has many new features. HTML5 has audio and video tags now.

In addition to specifying markup, HTML5 specifies scr

ipting API’s. DOM element interfaces are extended now.

HTML5 supports offline storage. It means you can run web application without internet connection. But for the first time it requires Internet connection so that it can create cache of all the files needed to run the application.

How to use offline storage

At the top of document in html tag add manifest attribute which tells the browser that it is a cache file.
e.g.

Then in the head tag use javascript to update the cache on DOM ready

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">// <![CDATA[
window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('New Cache available, do you want to load it ?')) {
      window.location.reload();
    }
  }
}, false);
// ]]></script>

Now create the cache file in which you will write the name of the file which will be cached

or not.
e.g.

1
2
3
4
5
6
7
8
9
10
11
   CACHE MANIFEST
 
   NETWORK:
   /checking.cgi
   CACHE:
   src/logic.js
   /src/style.css
   src/background.png
 
   FALLBACK:
   index_page.html backup_index_page.html

In above example it will cache the files logic.js, style.css, background.png from src folder. But it will require network connection for checking.cgi file.

Structure of CACHE MANIFEST file

Cache Manifest file consists of 3 headers.

1.Explicit section with the header CACHE.

In cache Header you have to write url of files which should cache from internet.

2.Online white list section with the header NETWORK.

In Network Header you will write the url of files which should not cache and required network connection whenever web application launched.

3.Fallback section with the header FALLBACK.

In some cases when there is no network connection and application can’t run without network connection then you can write Header fallback to redirect to offline page. It contains the url of offline page URL.

I hope you like this post about the HTML5 application cache.

You would also like:

Comments

  1. Pingback: Background Music On/Off Icon for a website using HTML5 Audio and Javascript | Code Insects

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>