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
  • Reddit's ExplainLikeImFive has good discussion brewing - "How does a coding language get 'coded' in the first place?" http://t.co/tXj3dISHCi
    September 30, 2014 at 11:10 AM
  • Each dev language has its own way of working with random number generation. See how #JavaScript & #Java stack up: http://t.co/QENl4kGVIs
    September 30, 2014 at 10:43 AM
  • .@TheGrisExplores: there's a new comment on your Dependency Injection Options for Java blog post - http://t.co/vs897t7bHd (Just FYI :-) )
    September 29, 2014 at 1:48 PM
  • Don't miss Vince Pendergrass' first post on the Keyhole blog - Don’t just randomize, truly randomize! http://t.co/QENl4kGVIs #cryptography
    September 29, 2014 at 9:57 AM
  • .@manohart Thank you for reading! Post author Alok Pandey has answered your question here - http://t.co/Uhn9Bv9L1a
    September 26, 2014 at 11:33 AM
  • Tech Night is now! @zachagardner & @lukewpatterson are presenting to the team on #Docker Code-Along style. Great discussions to be had!
    September 25, 2014 at 5:15 PM
  • Neat - A #JavaScript promise is an I.O.U. to return a value in the future. Here's a quick overview of promises: http://t.co/6wCz9aP4Qn
    September 25, 2014 at 11:35 AM
  • A huge welcome to Matthew Brown who joins the Keyhole team today!
    September 24, 2014 at 4:30 PM
  • RT @darrellpratt: A Journey From Require.js to Browserify http://t.co/t6N7Db1I4A
    September 24, 2014 at 11:54 AM
  • Creating a UI Designer for Quick Development - http://t.co/pNrayNFs5T http://t.co/hvqOaD6Wfq
    September 24, 2014 at 10:40 AM
  • We are under construction! Knocking down walls & expanding our offices in Leawood, KS this week. http://t.co/ph6JElh8lr
    September 23, 2014 at 9:46 AM
  • Did you know? Today in 1986 it was ruled that computer code is protected under copyright law - http://t.co/mCmWPvKOBE
    September 22, 2014 at 4:30 PM
  • Don't miss Alok Pandey's very first post on the Keyhole blog - Creating a UI Designer for Quick Development http://t.co/dWYMCOO3rf
    September 22, 2014 at 2:43 PM
  • If you're a Java dev, you're likely familiar with Annotations. But have you created your own #Java Annotations? Ex - http://t.co/mf1F3eIDY3
    September 21, 2014 at 5:15 PM
  • Check out a quick intro to Functional Reactive Programing and #JavaScript - http://t.co/4LSt6aPJvG
    September 20, 2014 at 11:15 AM
  • In Part 2 of our series on creating your own #Java annotations, learn about processing them with the Reflection API - http://t.co/E1lr3RmjI7
    September 19, 2014 at 12:15 PM
  • The life of a Keyhole consultant - A Delicate Balance: It’s What We Do http://t.co/ToRpWY3aix Blog as true today as the day it was written.
    September 19, 2014 at 9:50 AM
  • 7 Things You Can Do to Become a Better Developer - http://t.co/llPNMUN8nQ
    September 19, 2014 at 8:43 AM
  • .@jessitron Good luck, you'll do great! Our team really enjoyed your KCDC14 talks.
    September 18, 2014 at 10:19 AM
  • RT @woodwardjd: 7 deadly sins of programming. I think I did all of this last week. #strangeloop http://t.co/f7QFq1SpqW
    September 18, 2014 at 10:03 AM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.