Standardista

CSS3, JavaScript and HTML5 explained

Offline Applications: Application Cache & Manifest File

If you want to create web based applications that compete with software, you have to ensure that users can access your web application even when they are not online.  Application Cache enables you to create web based applications that ARE accessible even when the user is not currently online.

To access a webpage offline, we’ve been able to click on the ‘save’ menu item in our browser to save the html file and associated media for a while now. However, this method of saving web pages only works for static content. With the ubiquity of web-based applications, it is more important now than ever that web applications be accessible when the user is offline: whether the user is offline for the duration of a 5 hour flight, or if the user is just temporarily offline as G3 connectivity is lost while driving… um, I mean, riding as a passenger.

While browsers have been able to cache components of a website, HTML5 addresses some of the difficulties of being offline with the ApplicationCache API.

Using the cache interface gives your web application the advantages of 1) offline browsing, 2) faster reloads and 3) reduced server load. With Application Cache offline browsing, you entire site can be navigable even when a user is offline. By caching resource, the resources are local, loading much faster, and they’re retrieved only when altered, which reduces the server load.  For example, AppCache on mobile safari enables the local storing of up to 5MB (or limits you to 5MB, depending on your perspective). Different browsers may have different limits.

While you can change these limits in your browser preferences, you should always code to browser default values (unless all your users are power users). The Application Cache (or AppCache) enables you to specify which files should be cached and made available offline, enabling your website to work correctly, including page reload, when your user is not online. For AppCache to work, you include the manifest attribute in the opening <html> tag. The value of which is the URL of a text file listing which resources should be cached. In your HTML file, include manifest=”URL_of_manifest”.

<!doctype HTML>
<html manifest="resourcelist.manifest">
<meta charset="utf-8"/>
<title>....

With the inclusion of the manifest attribute on the <html> element linking to a valid manifest file, when a user downloads this page, the browser will cache the files listed in the manifest file, the manifest file itself and the current document  and make them available even when the user is offline. When the page is visited, the browser will try to update the cache. It fetches the manifest and, if the manifest has changed since the page was last visited, the browser re-downloads all the assets and re-caches them.

The cache manifest file

The .manifest file is a text file that lists the resources the browser should cache to enable offline access to your application. The file must start with the following string: CACHE MANIFEST. The required string is then followed by a list of files to be cached, and optional comments and section headers. A .manifest file must be served with the mime-type text/cache-manifest. Add

AddType text/cache-manifest manifest

to your .htaccess file. To create a comment, include a # as the first character of the line and the remainder of the line will be ignored. Section headers change the current section. There are three possible section headers, CACHE:, FALLBACK: and NETWORK:. The files following the CACHE: header are explicit. If no header is defined, or if files are listed above the headers, those files are expected to be cached. FALLBACK: switches to the fallback section — if the first file is not available, the second file listed on the line will be served.  While secure (https) files may be cached, they have to be from the same origin as the manifest. The NETWORK: heading leads the online white list section – it isn’t cached, and references to files will bypass the cache and access the file online. The manifest file is also permanently stored into the browser cache, only to be overwritten if there is an edit made to the file. While the browser will not read the comment, the .manifest file needs to be served with the mime-type “text/cache-manifest”. You may need to add a custom file type to your web server or .htaccess configuration if you don’t have access to the server. A .manifest  file lists the files that the browser should cache. The file may look something like this:

CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi

Note that the files listed in the cache manifest file are relative to the manifest file. Once an application is offline it remains cached until the user clears their browser’s data storage for the site, the .manifest file is modified or the app cache is programatically updated. You’ll not that there is a version number in a comment on the second line. While the browser will generally ignore the comment, it will note if there are changes to the file.. Updating a file listed in the manifest may not re-cache that resource. The .manifest file itself must be alternated. Changing the commented version number has become the standard way of inforing the browser that the manifest file should be considered updated.

Updating the cache

Once an application is offline it remains cached until the user clears their browser’s data storage for your site, the .manifest file is modified or the app cache is programmatically updated. To programmatically update the cache, call applicationCache.update(). When the status is in its ready, swap the old cache for the new one:

var appCache = window.applicationCache
if (appCache.status == appCache.UPDATEREADY ){
appCache.swapCache()
}

If the manifest file or a resource specified in it fails to download, the entire cache update process fails and the browser will keep using the old application cache.

3 Responses to “Offline Applications: Application Cache & Manifest File”

  1. Igor G. says:

    I wish this worked on iOS 4 on the iPad, but alas it doesn’t! This only works on the desktop version of Safari.

  2. [...] Standardists Estelle Weyl’s take on offline web apps [...]

Leave a Reply