Programming the Mobile Web : HTML 5 (part 3) - Offline Operation

1/24/2011 4:26:40 PM

6. Offline Operation

HTML 5 allows us to create offline-capable websites using a mechanism known as AppCache. The concept is very simple. The user first opens the website in normal online mode, and it provides the browser with a predefined text file called the manifest file, which lists all the resources (images, stylesheets, JavaScript, etc.) we want to be cached for offline navigation in the future.

The next time the user visits the page, the browser will try to download the manifest file again to see if it has changed. If it has not changed or there is no Internet connection, the HTML document is loaded from the cache as well as all the resources in the manifest.


Google Gears (available in Android) supports a LocalServer API that emulates the offline manifest file with a JavaScript API. It will be replaced over time by HTML 5 in newer Android devices.

The architecture of our website will be exactly the same as if all the resources had been downloaded from the server. Images, stylesheets, and JavaScript scripts will be loaded, but they will be sourced from the cache instead of the server.

6.1. The manifest file

The manifest is a text file, served as text/cache-manifest and defined as the manifest attribute of the html element:

<html manifest="oursite.manifest">

The file has to start with the line CACHE MANIFEST. This line can be followed by a series of relative or absolute URLs that we want to be cached for offline availability. We can comment lines by using a hash at the beginning of the line:

# This is a comment

After the initial page load the only request the browser will send is for the manifest file, to see if it has changed. If even a single character has changed, all the resources will be downloaded again so the current versions are available for the next load or for a reload action.

To ensure that the browser gets the most recent versions when any internal changes are made to the listed resources as well as when files are added to or removed from the list, the best and simplest way to update the manifest file is to use a comment with the last modified date, a version number, or a hash calculated from all the resources’ contents:

# Updated 2010-08-01

The standard also defined two subgroups inside the manifest file, but they do not work very well today on mobile browsers. The three groups are the CACHE—the implicit group we defined earlier—and the NETWORK and FALLBACK subgroups. In the network group we can define a series of folders, domains, or files that will always be fetched from the server, and in the fallback group we list a series of prefix (folder or resource) pairs. If the browser fails to download any resource from the server, it will use the other folder or resource defined in the same line.


Remember that the resources in the manifest will not be downloaded again until we update the manifest file or invalidate the AppCache.

These groups are defined as follows:

# resources
# resources
# folder_first_option folder_if_fail
# This list is continuing the first resource list

6.2. Cache detection

window.applicationCache is the object JavaScript offers representing the AppCache engine. It has a status property that tells us what is happening with the cache. The possible values are listed in Table 4.

Table 4. Status of applicationCache object
0UNCACHEDThis is the first load of the page, or no manifest file is available.
1IDLEThe cache is idle.
2CHECKINGThe local manifest file is being checked against the server’s manifest file.
3DOWNLOADINGThe resources are being downloaded.
4UPDATEREADYThe cache is ready.


To use AppCache, we should use the HTML 5 DOCTYPE (<!DOCTYPE html>) in the HTML file.

If the application cache status is 0 our document is loaded from the network; otherwise, it is loaded from the application cache.

We can manually invoke the cache update process using the applicationCache.update() method. However, the new resources will not be served from the cache until the page is reloaded or we use the applicationCache.swapCache() method.


If your offline application needs to store custom images that are only for one user (for example, pictures of the user’s contacts), you can create a manifest file dynamically for each user or, even better, store the images in base64 in offline storage for usage as inline images later.

6.3. Cache events

The applicationCache object supports many events, listed in Table 5.

Table 5. Events available for applicationCache
Event propertyDescription
oncachedExecuted after the first update process finishes
oncheckingFired when the update process begins
ondownloadingExecuted when the resources begin downloading
onerrorFired when an error occurs in the cache
onnoupdateExecuted when the update process has finished but the manifest file hasn’t changed from the previous load
onprogressFired when each resource starts downloading
onupdatereadyExecuted when the cache is ready after a new update process was started on an existing application cache

Debugging AppCache on iPhone

Debugging AppCache issues can be problematic at the beginning. To clear the cache in iPhone, go to SettingsSafariClear Cache.

If you want to see what AppCache has inside, you can find a SQLite database in the iPhone Simulator at /Library/Application Support/iPhone Simulator/User/Library/Caches/

More information on AppCache debugging can be found at

Table 6 reports on browser compatibility with AppCache.

Table 6. AppCache compatibility table
Browser/platformAppCache support
Android browserYes, from 2.0 (Gears before 2.0)
Nokia Series 40No
Internet ExplorerNo
Motorola Internet BrowserNo
Opera MobileNo
Opera MiniNo


Web Workers is a possible HTML 5 feature that allows JavaScript to execute different threads at the same time. At the time of this writing, no mobile browser implements it.
  •  Windows Phone 7 : Submitting Your First Windows Phone Application to the Windows Phone Marketplace
  •  Windows Phone 7 : Packaging, Publishing, and Managing Applications
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 3)
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 2)
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 1)
  •  Programming the Mobile Web : Mobile Rich Internet Applications (part 2) - JavaScript Mobile UI Patterns
  •  Programming the Mobile Web : Mobile Rich Internet Applications (part 1) - JavaScript UI Libraries
  •  Windows Mobile Security - Kernel Architecture
  •  Windows Mobile Security - Introduction to the Platform
  •  iPhone Programming : Table-View-Based Applications - Building a Model
  •  Mobile Application Security : The Apple iPhone - Push Notifications, Copy/Paste, and Other IPC
  •  Mobile Application Security : The Apple iPhone - Networking
  •  Windows Phone 7 Development : Handling Device Exceptions
  •  Registering a Windows Phone Device for Debugging
  •  Programming the Mobile Web : WebKit CSS Extensions (part 5) - Transformations
  •  Programming the Mobile Web : WebKit CSS Extensions (part 4) - Animations
  •  Programming the Mobile Web : WebKit CSS Extensions (part 3) - Transitions
  •  Programming the Mobile Web : WebKit CSS Extensions (part 2) - Reflection Effects & Masked Images
  •  Programming the Mobile Web : WebKit CSS Extensions (part 1) - WebKit Functions & Gradients
  •  Windows Phone 7 Development : Debugging Application Exceptions (part 2) - Debugging a Web Service Exception
    Top 10
    Understanding HTML5 Tags (part 2) : Knowing How Tags Work
    Understanding HTML5 Tags (part 1) : Parsing Code, Nesting Tags
    Windows Server 2008 and Windows Vista : Migrating GPOs (part 2) - Migration Tables
    Windows Server 2008 and Windows Vista : Migrating GPOs (part 1) - Migrating GPOs Across Domains
    How To Back Up All Your Devices (Part 2)
    How To Back Up All Your Devices (Part 1)
    How To Choose An External Drive (Part 2)
    How To Choose An External Drive (Part 1)
    New Restrictions On Old Office Software (Part 2)
    New Restrictions On Old Office Software (Part 1)
    Most View
    How To Enable Big Picture Mode In Steam
    Windows Server 2008 : Transport-Level Security - Active Directory Rights Management Services
    Programming .NET Components : Building a Distributed Application (part 4) - Administrative Type Registration, Administrative Configuration Example
    The Hit List - Comprehensive Task Manager
    Instagram Substitutes On Android (Part 2) - Cinemagram, Clik, Steam Mobile & TeamViewer
    Web Security : Seeking Design Flaws - Testing Random Numbers, Abusing Repeatability
    Windows Server 2008 R2 : Managing Remote Access to Your Server - Understand Remote Desktop Services
    Programming .NET Components : Visual Studio 2005 and Security
    Protecting Me
    Android’s Security Model
    Leveraging and Optimizing Search in SharePoint 2010 : Define Content Sources
    Fishing For Chips
    Windows Server 2003 : Configuring a Windows IPSec Policy (part 1) - Using the IPSec Policy Wizard to Create a Policy
    The Connected BlackBerry : Connection Paths (part 2) - Mobile Data Service Connection, Wi-Fi Connection
    MySQL for Python : Passing a query to MySQL
    System Builder - The Future Of USB
    Windows Phone 7 Development : Push Notifications - Implementing Toast Notifications
    Asus GTX 660 Ti DirectCU II Top (Part 2)
    Iphone SDK : Working with the Address Book Database - Accessing Multi-Value Properties
    Work with IIS 7.0 : Delegate Rights Assignments