HTML5 – Offline Capabilities Using the Cache Manifest

by on September 17, 2012 10:28 am

One of the most interesting features of the HTML5 specification is the capability for web applications to perform while offline (i.e. without internet connectivity). Most browsers implement a caching mechanism that stores downloaded resources to a local drive, which is done as resources are encountered. While this does help with performance, as resources are only cached as they are encountered, not all resources may be cached. So, potentially, if connectivity is lost then the site is not fully functional.

Introducing the the Cache Manifest. A manifest file contains caching directives for what to cache, what to not cache, and instructions on what to do when a web resource is not available. This text file defined by the web application indicating to an HTML5 complaint browser resources to cache in “application cache.” This manifest file is referenced by an HTML manifest attribute. An example is shown below:

<html lang="en-us" manifest="example.appcache" >
	….
</html>

Explicitly specifying the browser to cache specific HTML, Javascript, and CSS files is done by defining these elements under a CACHE directive in the manifest file. This file contains an identification directive along with a CACHE directive, followed by specific resources to cache. An example is shown below:

CACHE MANIFEST # 2012-9-1:24
# Explicitly cached 'master entries
CACHE:
app.js
css/jquery.mobile-1.1.0-rc.2.min.css
css/jquery.mobile.structure-1.1.0-rc.2.min.css
css/jquery.mobile.theme-1.1.0-rc.2.min.css
css/styles.css
index.html
libs/AMDbackbone-0.5.3.js
libs/backbone-0.9.2.js
libs/css/normalize.css
libs/jqm-config.js
libs/jquery-1.7.2.js
libs/jquery.mobile-1.1.0-rc.2.min.js
…..

Comments can be added to the file using # tag. Also, comments can be used to invoke a cache refresh from the browser; when contents change in this file, the browser will re-download entries. It is also worth noting that this downloading is asynchronous.

Resources that always require connectivity (and therefore will bypass the application cache) can be specified under the NETWORK: directive, as shown below.

NETWORK:

http://localhost:8080/khs-backbone-example/sherpa

Another nice feature is the ability to provide an alternative HTML file for resources that are inaccessible from the server.  A FALLBACK: directive can be defined that will associate certain resource(s) with an HTML page for display when a browser can’t access a particular resource. The example below shows a FALLBACK: entry for any inaccessible HTML resource. Notice, wildcards are allowed in the FALLBACK: and NETWORK: directives.

FALLBACK:
/*.html  /offline.html

The application cache can also be controlled via a Javascript API. The status of an application cache can be checked by testing state on the:

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;
};

With Javascript programming, the application cache can be updated by first issuing an update, then checking the status for completion, and then swapping the cache. Example Javascript is shown below:

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();
}

The application cache is especially useful for HTML5/Javascript-based mobile applications, with which bandwidth and connectivity is potentially an issue.

Hopefully this quick introduction has provided enough information for you to apply it. For more details on the application cache and the details of the HTML5 spec, check out the “Living Specification.”

– David Pitt, asktheteam@keyholesoftware.com

  • Share:

Leave a Reply

Things Twitter is Talking About
  • Vacuole #Encapsulation aims to minimize the code necessary for routinely verbose data tasks -http://t.co/fJQzz731rZ
    April 23, 2014 at 9:45 AM
  • DYK? We translate our hands-on experience to custom courses to train your dev teams. Our new course on #AngularJS: http://t.co/Bf3UuClj4Z
    April 23, 2014 at 8:45 AM
  • Interested in #Backbone & #Marionette but not sure where to start? Check out the Marionette-Require-Boilerplate: http://t.co/XDj43BwSS3 #SPA
    April 22, 2014 at 4:50 PM
  • Responsive Design can help in giving your users a consistent app experience across devices. Quick tutorial - http://t.co/BDrT5LvgRo
    April 22, 2014 at 2:31 PM
  • Tips & tricks to save time in the #Eclipse IDE - http://t.co/uGgCkchwNk (keystroke combos, navigation, time tracking & more)
    April 22, 2014 at 8:40 AM
  • Join us! Looking to add to our team a developer w/ advanced #JavaScript & #NodeJS exp (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 21, 2014 at 7:35 PM
  • Looking into #ExtJS but don't know where to start? Check out our video tutorial series to find your way around - http://t.co/XFYDT6YNWA
    April 21, 2014 at 4:35 PM
  • We've been tinkering with JS library Famo.us since its public release 4/10. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 21, 2014 at 2:03 PM
  • RT @CompSciFact: Rivest, Shamir, and Adleman published the RSA public key cryptography algorithm in 1978.
    April 21, 2014 at 11:13 AM
  • DYK? When we share/RT/blog/etc, it doesn't mean that Keyhole endorses it - we just like variety of opinions! Info: http://t.co/MXhB9lE9tV
    April 19, 2014 at 3:01 PM
  • A huge welcome to Justin Graber who joined the Keyhole team this week!
    April 18, 2014 at 3:25 PM
  • Pssst... @kc_dc early bird pricing ends on Sunday. Shoot us a note if you want to save 10% off of your ticket with our sponsor promo code!
    April 18, 2014 at 2:49 PM
  • Join our team! Looking for a developer w/ advanced #JavaScript & #NodeJS experience (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 18, 2014 at 11:21 AM
  • .@befamous has huge potential to make HTML5/JS/CSS web pages feel as native apps. Here's our inital tech takeaways - http://t.co/S77TSKHDKd
    April 18, 2014 at 9:50 AM
  • Why to use AngularUI Router instead of ngRoute - http://t.co/tBnj5ZCkOw
    April 17, 2014 at 7:55 PM
  • RT @joemccann: Total Number of GitHub Repositories by Programming Language http://t.co/30cekDsE4s
    April 17, 2014 at 4:25 PM
  • JSF + AngularJS = AngularFaces? http://t.co/mXvOTwVbb6 // Interesting insight. Thoughts?
    April 17, 2014 at 3:45 PM
  • RT @MikeGelphman: Great news, guys: @TobiasRush founder of @eyeverify is our latest @MobileMidwest speaker addition http://t.co/8fE8oNfPnX
    April 17, 2014 at 1:35 PM
  • .@befamous was released publicly 4/10 & we've been tinkering with it since. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 17, 2014 at 8:33 AM
  • Famo.us' main idea is for HTML5/JS/CSS web pages to feel like native mobile apps. So, @zachagardner tried it out - http://t.co/S77TSKHDKd
    April 15, 2014 at 6:40 PM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2013 Keyhole Software, LLC. All rights reserved.