I spent this evening updating my “iPhone VR” Javascript/CSS demo to work with iPhone OS 3.0 (it had stopped working 100% correctly since the OS update). I also decided to spend some time making it work as an offline-capable web application.
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.
Gotchas:
- 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 editingmime.typesto add a line that looks like this:text/cache-manifest manifest
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 filehttp://example.com/webapp/index.html, your offline web app knows nothing of this mapping ofwebapp/towebapp/index.html. If the URL bar readshttp://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 ifindex.htmlfile has been cached. The device simply does not know to look forwebapp/index.htmlinstead ofwebapp/. Thus, you must ensure that the URL bar readswebapp/index.htmlbefore the user makes a home screen bookmark. - At first, I thought I would enforce the above with a tiny bit of JavaScript that simply reads
window.locationand redirects towindow.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 towindow.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 smallwebapp/index.htmlfile that simply redirects tomain.html. (I could have used a server redirect inside of an.htaccessfile instead, but I chose not to, for no particular reason.)
Tips:
- 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.