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
  • RT @m_evans10: @joewalnes A SQL query goes into a bar, walks up to two tables and asks, "Can I join you?"
    August 20, 2014 at 3:55 PM
  • Have you read @wdpitt's newest book? - Web Essentials using #JavaScript & #HTML5. Free PDF download via @InfoQ: http://t.co/lesuPJ770I
    August 20, 2014 at 2:31 PM
  • How can we ensure that we write unit tests with sufficient coverage? Here are some tips for success in #unittesting - http://t.co/zqytilzXXW
    August 20, 2014 at 11:31 AM
  • RT @DZoneLinks: Easily Boost your Web Application by Using nginx - Compuware APM Blog - http://t.co/wm26pvCyKm - @DZoneLinks Big Link by ha…
    August 20, 2014 at 8:59 AM
  • Interested in @unity3d? Check out @johnwboardman's tutorials for Unity game dev with #JavaScript & C#: http://t.co/exsha7cP2b
    August 19, 2014 at 3:30 PM
  • But if you have a passion for quality dev, we might be up your alley. Check out our culture - http://t.co/kWgVdxgvpG http://t.co/y4IFbUA5Ia
    August 19, 2014 at 3:04 PM
  • FRP can solve a common #JavaScript problem - asynchronous requests to the server not returning in requested order http://t.co/jB0ox7Jo4n
    August 19, 2014 at 11:38 AM
  • #RabbitMQ: messaging software built on AMQP protocol. Learn relevant concepts & how to avoid common "gotchas" here: http://t.co/ZwMXlhKyX8
    August 19, 2014 at 9:30 AM
  • We're about to send out our free monthly tech newsletter. Dev tips/articles via email. Not on the list yet? Sign up - http://t.co/aamFVCyyJn
    August 18, 2014 at 1:44 PM
  • There's a new post on the Keyhole blog by Phuong Nguyen - Functional Reactive Programing and #JavaScript - http://t.co/jB0ox7Jo4n
    August 18, 2014 at 11:03 AM
  • Thanks for the RT, @TheGrisExplores! Have a great week.
    August 18, 2014 at 9:38 AM
  • Rapid appdev has a bad rep, but there are ways to bring development time down the right way. Don't Fear the Rapid - http://t.co/aTPcAKOj0r
    August 18, 2014 at 8:31 AM
  • Code For Maintainability So The Next Developer Doesn't Hate You - http://t.co/FWTMF7Pixd 8 helpful tips to do so.
    August 16, 2014 at 12:20 PM
  • DYK? We prefer diverse views, so the info we share doesn't always reflect us as a company. See our Social Policies - http://t.co/MXhB9lE9tV
    August 15, 2014 at 3:30 PM
  • KHS summer intern Bryan Melland just said his goodbyes, headed off to his 1st year @ University of Nebraska. Best wishes for a great year!
    August 15, 2014 at 3:02 PM
  • RT @fpmoles: It's official, KC has a Spring User Group: http://t.co/vaoiGcEva4 cc:@rob_winch
    August 15, 2014 at 2:01 PM
  • Automated Testing is great for dev, but does bring a set of challenges (especially for #agile teams). Success tips: http://t.co/1acl1ngO7i
    August 15, 2014 at 1:20 PM
  • A #JavaScript promise is an I.O.U. to return a value in the future. Promises are cool. Learn about them here - http://t.co/6wCz9b7e4v
    August 15, 2014 at 8:16 AM
  • Found a great resource for folks who want to learn to code - #KC Code Noob. The next Meetup 8/20 covers #Bootstrap - http://t.co/bHom4Lvz7h
    August 14, 2014 at 2:11 PM
  • RT @nicholascloud: the mother of all javascript wysiwyg editor lists https://t.co/o83cGoHQB8
    August 14, 2014 at 11:48 AM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.