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
Now create the cache file in which you will write the name of the file which will be cached
or not.
e.g.
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.
