Let's Get Started!

San Francisco HTML5 User Group

Agenda

  • About Offline Apps and ApplicationCache
  • AppCache Basics
  • Demo Time
  • Questions and Answers

Pay attention, win prizes!

HTML5 Feature Areas

HTML5 Feature Areas
HTML5 Logo and Badges by W3C

HTML5 Offline and Storage

Offline Feature Area
  • File Storage
    • Browser Cache
    • Application Cache
  • Data Storage
    • Cookies
    • Session Storage
    • Local Storage
    • IndexedDB

Using ApplicationCache

  • Offline use cases:
    • Air travel
    • Remote areas
    • Intermittent disconnects (tunnel/subway)
  • Use Application Cache
    • Browser cache is not reliable for complete offline
    • Fetch resources that have not yet been visited
    • Speeds up content delivery

Web Apps that Use ApplicationCache

Angry birds
Angry Birds (Chrome Web Store)

Web Apps that Use ApplicationCache

Financial Times
Financial Times Web App ft.com

Web Apps that Use ApplicationCache

Gmail
Offline Gmail

Browser Support
ApplicationCache Basics

ApplicationCache Basics

Create a manifest file (*.appcache)

CACHE MANIFEST
# version 2011-07-012 06:06:44

CACHE:
# html files
cache.html
index.html
# css files
css/style.css
# image files
apple-touch-icon.png
favicon.ico
img/fallback.png

FALLBACK:
/ /demo/fallback.html

NETWORK:
*

# Although it was removed from the spec, some browsers still require server configuration (mime type for *.appcache)

ApplicationCache Basics

Add manifest attribute to the html element

<doctype html>
<html class="no-js" lang="en" manifest="manifest.appcache">
ApplicationCache is a Douchebag.
Jake Archibald
Lanyard

ApplicationCache Sequence of Events

  • Navigate to URL in browser
  • Browser checks if there already an ApplicationCache for the origin
    • No: Download initial version of the ApplicationCache
    • Yes: Browser loads resources from ApplicationCache and checks if the manifest has changed (on the server)
      • No: Done
      • Yes: Download new version of the ApplicationCache
  • Important: ApplicationCache does not auto-refresh a page (you can manually refresh or programatically, based on ApplicationCache events)

ApplicationCache Events

// log each of the events fired by window.applicationCache
window.applicationCache.onchecking = function(e) {log("Checking for updates");}
window.applicationCache.onnoupdate = function(e) {log("No updates");}
window.applicationCache.onupdateready = function(e) {log("Update ready");}
window.applicationCache.onobsolete = function(e) {log("Obsolete");}
window.applicationCache.ondownloading = function(e) {log("Downloading");}
window.applicationCache.oncached = function(e) {log("Cached");}
window.applicationCache.onerror = function(e) {log("Error");}

//Log each file
window.applicationCache.onprogress = function(e) {log("checking");}
  appCacheLog("Progress: downloaded file " + counter);
  counter++;
}

Online and Offline Events

//Online and Offline status detection
window.addEventListener("online", function(e) {
  log("You are online");
}, true);
window.addEventListener("offline", function(e) {
  log("You are offline");
}, true);
It's demo time!

Demo

Tips and Tricks

  • Works well with local storage or IndexedDB
  • Use the '*.appcache' extension for manifest files
  • Don't ever cache the manifest file!
  • Automatically generate the manifest (use HTML5 Boilerplate)
  • To support older browsers, configure your web server to serve manifest files with the 'text/cache-manifest' mime type
  • Use developer tools to analyze problems
  • Clear the cache before you retest
  • Quota and quota management varies per browser
    • about:cache
    • chrome:appcache-internals

Cache Manifest Validation Tool

More Information
Questions?

Thank You!