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.
Figure 1: Main Screen (in Full-Screen Mode)
Figure 2: Settings Screen (Full-Screen)
Figure 3: SpinningWheel Date Picker (Full-Screen)
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:
- Create a manifest which lists all the resources needed by the Web application to work offline. This includes the JavaScript, CSS and image files referenced by the application and its included packages (iUI and SpinningWheel). See Listing 1.
- 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 addingtext/cache-manifest manifest
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.
Countdown 2.0
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" /> ...
Copyright © 2009 Technetra. This code is covered by the MIT License. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pings are currently closed.
September 29th, 2009 at 3:45 am (Comment)
Sean Gilligan Says:
Thanks again, for the great work! It informed and inspired my efforts to get the iUI Music Sample running in offline mode. I wrote a short blog entry about it. The Music sample has two simple dynamic pages that use the “fallback” feature of the cache manifest during offline operation.