The basic process of making your web app cacheable offline is, in theory, fairly straightforward, and generally well-documented at Apple’s website. I ran into some interesting headaches though.
- First thing to note is that your web server must serve your cache manifest file with a MIME type of
text/cache-manifest. This may mean editing
mime.typesto add a line that looks like this:
or perhaps a line in
httpd.confthat looks like this:
AddType text/cache-manifest .manifest
- The next thing that had me stumped for a while: while your web server may know how to take the URL
http://example.com/webapp/and automatically and invisibly serve up the file
http://example.com/webapp/index.html, your offline web app knows nothing of this mapping of
webapp/index.html. If the URL bar reads
http://example.com/webapp/and you save it locally using a home screen bookmark, it will fail to launch correctly if the device is offline, even if
index.htmlfile has been cached. The device simply does not know to look for
webapp/. Thus, you must ensure that the URL bar reads
webapp/index.htmlbefore the user makes a home screen bookmark.
window.locationand redirects to
window.location + "index.html"if the URL ends in a slash. This worked while online, but it broke my app when offline, even when the redirection was not taken. Why? It seems that any reference to
window.locationin your script is treated as network access. Since the device is offline, it generates an error alert.
Instead, I made my app live at
webapp/main.html, and created a small
webapp/index.htmlfile that simply redirects to
main.html. (I could have used a server redirect inside of an
.htaccessfile instead, but I chose not to, for no particular reason.)
- You can specify a custom icon for the home screen bookmark using a
<link>element, like so:
<link rel="apple-touch-icon" href="custom_icon.png" />
If you don’t want iPhone to automatically apply the “shine” effect on your icon, use the following instead:
<link rel="apple-touch-icon-precomposed" href="custom_icon.png" />
- Since iPhone OS 3.0, offline web apps can have custom splash screens, just a like a native app! Simply add a
linkelement to your web page:
<link rel="apple-touch-startup-image" href="/splash.png" />
If you want to see the results of all this, go to http://bunnyherolabs.com/iphone/xform/ on your iPhone or iPod Touch, then click the “+” (add bookmark) button and choose “Add to Home Screen.” Now you can click on the “Panorama” icon on your home screen to see the demo at any time, even when not connected to the internet.