Tip 29
Tip 29. Working Offline
With HTML5’s Offline Web Applications support,^7 we can use HTML and
related technologies to build applications that can still function while discon-
nected from the Internet. This is especially useful for developing applications
for mobile devices that may drop connections, or for simply building an app
that you want to run completely offline.This technique works in Firefox, Chrome, and Safari, as well as on the iOS
and Android 2.0 devices, but there’s no fallback solution that will work to
provide offline support for Internet Explorer.AwesomeCo just bought its sales team some iPads, and would like to make
the notes application we developed in Tip 28, Storing Data in a Client-Side
Database Using IndexedDB, on page 190, work offline. Thanks to the HTML5
application cache manifest file, that will be a simple task. Let’s see how it
works.Defining an Application Cache with the Manifest
Our notes app has a lot of dependencies. When we download the main HTML
page, the browser has to go and get some CSS files and some JavaScript files.
We can create a manifest file that contains a list of all the web application’s
client-side files that need to exist in the client browser’s cache in order to
work offline. When the user visits the page for the first time, all the files in
the manifest will be downloaded. Every file that the application will reference
needs to be listed in the manifest for things to work properly. The only
exception is that the file that includes the manifest doesn’t need to be listed;
it is cached implicitly.Let’s build a manifest for our notes app so we can use it offline. Create a file
called notes.appcache. Its contents should look like this:html5_offline/notes.appcache
CACHEMANIFEST
# v = 1.0.0
stylesheets/style.css
javascripts/notes.js
javascripts/IndexedDBShim.min.jsreport erratum • discussWorking Offline • 203
Download from Wow! eBook <www.wowebook.com>