HTML Application Cache

HTML Application Cache

Conventionally, web based applications only work when a computer has an active connection to the Internet. The new application cache feature in HTML 5 enables a browser to save all of a websites resources so that it can display correctly even when the computer is not connected to the Internet. Apart from enabling offline browsing, using the HTML 5 application cache feature improves performance by eliminating the need to load resources from the web server each time the user on the client computer makes a request to access cached pages. It also reduces server load in that a browser will only need to download updated or changed parts of a cached website.

Caching Files

To cache webpage files for offline use, you first need to create a cache manifest file. This is text file that instructs browsers on what files it should store and those that it should leave out. Below is an example of a simple cache manifest file.

Advantage Of Application Cache

  • Offline browsing — Users can use the application even when they’re offline or there are unexpected disruptions in network connection.
  • Improve performance — Cached resources load directly from the user’s machine rather than the remote server hence web pages load faster and performing better.
  • Reduce HTTP request and server load — The browser will only have to download the updated/changed resources from the remote server that minimize the HTTP request and reduce the server load.

Cache Manifest File

CACHE MANIFEST
# v1.0 : 10-08-2014
 
CACHE:
# pages
index.html
 
# styles & scripts
css/theme.css
js/jquery.min.js
js/default.js
 
# images
/favicon.ico
images/logo.png
 
NETWORK:
login.php
 
FALLBACK:
/ /offline.html

How to Use Cache Manifest File

<html manifest="example.appcache">
  ...
</html>

How to Update Cache Manifest File

function onUpdateReady() {
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        		window.applicationCache.swapCache();
        		location.reload();

}
}
window.applicationCache.addEventListener('updateready', onUpdateReady);