Countdown 2.0: Supporting HTML5 Cache
Taking advantage of HTML5 caching in an iPhone Webapp can eliminate the need to employ cumbersome data URLs for standalone or offline style applications. The offline storage facilities of HTML5 have been around for the iPhone since OS 2.1 and can, for devices running recent OS releases, significantly reduce the complexity of deploying offline Web applications. Caching also provides the potential for automatic refresh when the standalone Webapp comes back online.
So we “trained” the network connected version of our Countdown Webapp to use HTML5 caching (it already used HTML5 localStorage facilities). The “training” steps were very simple:
- Attach the URL of this manifest to the manifest attribute of the Webapp’s HTML tag. See Listing 2.
- Ensure that when the manifest resource is retrieved by the browser, the manifest is served as a
text/cache-manifestmime-type by the HTTP server. In our case this meant adding
to our Apache mime.types configuration file. This is necessary for the moment since the listing of standard media types from IANA, as incorporated by Apache 2.2+, does not yet include this mime-type by default.
In addition, since Countdown is designed to be a standalone application, we added an
apple-mobile-web-app-capable meta tag key in order to run in full-screen mode, removing the standard Safari URL and Button bars when launched from the Home Screen.
You can try out this new version of Countdown with your iPhone. Be sure to add the application to your Home Screen using the bookmark button at the bottom of the initial Safari screen. This is necessary in order actually to view the Webapp in full-screen mode. The Webapp may be partly functional under some other browsers like Firefox and Chrome (no support for the SpinningWheel date picker).
You can download the new project files from here.
A big thanks to Sean Gilligan (co-maintainer of the iUI Framework) for suggesting these improvements to Countdown Webapp.
Listing 1: Cache Manifest for Countdown iPhone Webapp (countdown.manifest)
CACHE MANIFEST iui/iui.css iui/iui.js spinningwheel/spinningwheel.css spinningwheel/spinningwheel.js countdown.css countdown.js countdown_touch_icon.png iui/listArrowSel.png iui/loading.gif iui/selection.png iui/toolbar.png iui/toolButton.png iui/blueButton.png iui/backButton.png iui/whiteButton.png iui/redButton.png iui/grayButton.png iui/listGroup.png iui/listArrow.png iui/pinstripes.png iui/toggle.png iui/toggleOn.png iui/thumb.png spinningwheel/sw-header.png spinningwheel/sw-button-cancel.png spinningwheel/sw-button-done.png spinningwheel/sw-slot-border.png spinningwheel/sw-alpha.png
Listing 2: Adding manifest URL to manifest attribute of HTML tag & removing top and bottom banners with
apple-mobile-web-app-capable META tag (countdown.html)
... <html manifest="countdown.manifest"> <head> <title>Countdown</title> <link rel="apple-touch-icon" href="countdown_touch_icon.png" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> ...