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
  • .@Jinaljay transitioned to #Java from .NET & needed to switch IDEs. Tips that helped her in the switch to #eclipse - http://t.co/wbx9qFUAqp
    July 6, 2015 at 4:05 PM
  • Protip: Code For Maintainability So The Next Developer Doesn’t Hate You -http://t.co/G0gFOD7Pyj
    July 6, 2015 at 3:55 PM
  • Doing #Agile with a Distributed and/or Remote Team? No Problem! Tools and techniques for success - http://t.co/XrYJE8Xict
    July 6, 2015 at 12:35 PM
  • New to #JavaScript prototypal inheritance? Here are some notes to help you along the way - http://t.co/NTIDZS6Uhy
    July 5, 2015 at 7:55 AM
  • ICYMI: we've released a demo version of #GrokOla which is open to the public. Try out its features & capabilities - http://t.co/O4ladowmFU
    July 4, 2015 at 3:05 PM
  • Happy 4th of July from the Keyhole team! We hope that you have a happy and safe holiday with your family and friends.
    July 4, 2015 at 9:55 AM
  • Let's talk testing. Here are common challenges #Agile teams face when writing automated tests & how to overcome them: http://t.co/DrKbNZJcE0
    July 3, 2015 at 11:06 AM
  • #GrokOla users get free educational tutorials. But lucky you, we've released some to the public. #JavaScript primer - http://t.co/nIR9XiWY6O
    July 3, 2015 at 10:55 AM
  • Being able to isolate debugging techniques can help make you a better debugger. Here's Time-Oriented #Debugging http://t.co/UplJgP4VzC
    July 2, 2015 at 10:50 AM
  • RT @zachagardner: @zachagardner has declared it is @ChipotleTweets day at @KeyholeSoftware . You have been warned 🐓🐖🐄
    July 2, 2015 at 10:09 AM
  • Current state of random number generation & the differences in how #Java & #JavaScript approach it - http://t.co/5tBKNXnu8T #security
    July 1, 2015 at 2:45 PM
  • Woohoo - 600 followers! Thanks, everyone. We'd love to ask you - what type of tweets / dev content would you like to see more of from us?
    July 1, 2015 at 10:38 AM
  • We would like to welcome Dallas Monson to the team today! Dallas is a Senior Architect focused on UI/UX and #JavaScript. Welcome, Dallas!
    July 1, 2015 at 8:35 AM
  • Good introduction to TypeScript - http://t.co/0N22fVpAHt Plus, how to approach modularization in #TypeScript - http://t.co/wxRWGBj3Uh
    June 30, 2015 at 3:25 PM
  • .@mrbristopher just delivered a new S911 Night Drone to James Hayes, winner of our #kcdc15 giveaway! Congrats, James! http://t.co/RriJIxubH2
    June 30, 2015 at 11:35 AM
  • It feels like primitives could have been left out of the initial implementation of #Java. See why - http://t.co/A8ChCBHXJO
    June 29, 2015 at 4:05 PM
  • Developers in a bounce house! I repeat, developers in a bounce house! We had a blast at our 1st company picnic. Pics: http://t.co/XIqs7ECUst
    June 29, 2015 at 1:40 PM
  • New #SpringBatch tutorial from @jhackett01: Spring Batch – Replacing XML Job Configuration With JavaConfig http://t.co/PmdXnriKQu #java
    June 29, 2015 at 11:46 AM
  • We had such a fun time at the Keyhole company picnic! Pictures to come, including some of our developers in the bounce house. #loveourteam
    June 29, 2015 at 8:41 AM
  • In #JavaScript, how do we harness the power of callbacks without the confusing mess of nested functions? Promises - http://t.co/j1gAJ9hi3D
    June 29, 2015 at 8:40 AM