Application Cache – A new HTML5 API

A new API among html5 API’s is “Application Cache”.

Just go thru the basics in w3schools or htmlslides prior reading this article.

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:

  1. Offline browsing – users can use the application when they’re offline
  2. Speed – cached resources load faster
  3. Reduced server load – the browser will only download updated/changed resources from the server

To enable application cache, include the manifest attribute in the document’s <html> tag:

<!DOCTYPE HTML>
<html manifest=”demo.appcache”>

</html>

Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).

The recommended file extension for manifest files is: “.appcache”

The Manifest File

The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).

The manifest file has three sections:

  • CACHE MANIFEST – Files listed under this header will be cached after they are downloaded for the first time
  • NETWORK – Files listed under this header require a connection to the server, and will never be cached
  • FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible

Once an application is cached, it remains cached until one of the following happens:

  • The user clears the browser’s cache
  • The manifest file is modified (see tip below)
  • The application cache is programmatically updated.

Example:

<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);

cache.appcache:

CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

NETWORK:
*

Cache status

The window.applicationCache object is your programmatic access the browser’s app cache. Its status property is useful for checking the current state of the cache:

var appCache = window.applicationCache;

switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};

Imp points to remember:

A manifest file can have any file extension, but needs to be served with the correct mime-type (see below).

<html manifest="http://www.example.com/example.mf">
  ...
</html>

A manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or .htaccess configuration.

 

My Example:

HTML File:

<html manifest=”myproj_assets/DemoVIP_country/mf/mobile.mf”>

Script file:

somewhere written..cannot find right now..refer the above code…

Cache file:

CACHE MANIFEST
# 2014-06-16:v50 $Rev: 1050 $ $Date: 2014-06-16:31:56 +0530 (Wed, 16 Jaun 2014) $
# Roulette CB and DT.
# Explicitly cached ‘master entries’ .
CACHE:

# PAGES
../../../myproject/mobilelogin2.htm
../../../myproject/mobilelobby2.htm
# JAVASCRIPT

../../../myproject/scripts/translations/lang_en.js
../../../myproject/scripts/casino.js
../../../myproject/scripts/iscroll4.js
../../../myproject/scripts/jquery-1.9.1.js
../../../myproject/scripts/jquery-ui-1.10.2.js
../../../myproject/scripts/jquery.mobile-1.2.0.js
../../../myproject/scripts/kinetic-v4.7.2.js
../../../myproject/scripts/jquery-migrate-1.2.1.js
../../../myproject/scripts/jquery.fastclick.js
../../../myproject/scripts/jquery.progressbar.js

# STYLES
../styles/merged.min.css
../styles/images/icons-18-black.png
../styles/images/icons-18-white.png
../styles/images/ajax-loader.png

# IMAGES
../images/Logo.png
../images/logo.png
../images/sprites.png

../../common_images/cards/cards.png
../../common_images/ch/player.png

../../common_images/bj/bj_1.png
../../common_images/bj/bj_1_G.png
../../common_images/bj/bj_2.png
../../common_images/bj/bj_2_G.png
# SOUNDS
#images/tick.mp3
NETWORK:

*.txt
*.jsp
*

References: html5rocks

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s