Edd's Log

HTML 5 Offline Data Storage and the iPhone

HTML 5 comes with two ways for developers to keep data on a users machine to speed up data delivery. These are offline file caching and client-side databases. Both of these features have been implemented on the iPhone and are available for developers to speed up page loads and create better browsing experiences.

Offline caching in particular is extremely easy to implement and can vastly improve the experience on the iPhone. When implementing this on my UK Weather App it brought the initial load down to around a second and made the interface responsive almost immediately.

To implement it you have to create a new file and specify its location in your html. The file is called a cache manifest. It needs to outline the files that your app requests and whether they are static or dynamic. The manifest has to be sent with the content type text/cache-manifest (this is easily possible using something like php). Here is an example of a manifest file correctly specifying its content type:

<?php header("Content-type: text/cache-manifest"); ?>
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png

# pages that contain dynamic content and need a network connection
NETWORK:
ajax.php

The file needs start with CACHE MANIFEST and contains a new file on each line (for full specifications of the manifests check the apple documentation). The path to the files should be relative to the location of the manifest. One caveat that I did discover while testing is that you need to specify all files that are going to require the network or the iPhone will simply not load those files. You then need to include a link to the manifest in your HTML document:

<html manifest="cache-manifest.php">

With those two small parts the iPhone or any other browser that has offline storage enabled will keep a copy of the files in the manifest on the device and serve them from its local cache rather than re-downloading them every time.