2009-09-29

iUI Sample WebApp using HTML 5 Offline Cache on Google App Engine

I've pushed a new development build of the iUI sample and test apps to Google App Engine (iui-js.appspot.com)

Among other changes in this build, the Music Sample web application now supports offline operation on the iPhone ('airplane mode'.)  It has been updated to HTML 5 and includes an application cache manifest (music.manifest)  Although the Music Sample is fairly simple it has two dynamic 'pages' (they're actually
elements) that are loaded via Ajax.  The Search Results page simply inserts the search string into three sample list entries.  The Stats page returns static HTML content but is served up via a dynamic URI that delays for two seconds before returning the content.  The purpose of the delay is to demonstrate the loading spinner.  Both of these pages have "fallback" pages that are displayed in offline mode.  The screenshots below show what each page looks like in online and offline mode.

If you have an iPhone and want to try it out, here are the steps:

  1. Load the Music Sample in Mobile Safari.
  2. Touch the "+" button on the bottom toolbar.
  3. Touch the "Add to Home Screen" button on the action sheet that pops up.
  4. (Optional) Edit the name that will appear under the icon on your home screen.
  5. Touch the "Add" button (top right)
  6. Launch the WebApp from your newly created Home Screen button.
  7. Browse around
  8. Exit the WebApp and load the iPhone "Settings" application
  9. Turn on "Airplane Mode"
  10. Return to the Music Sample WebApp.
  11. Browse around making sure to visit the Stats and Search Results pages
  12. Turn off "Airplane Mode"
Wasn't that cool?  There are two 'themes' configured in the application and the resources for both are listed in the manifest, so you can actually change themes while offline (this is a cool demo, but may not be the optimal handling of themes for offline WebApps)






For further details,  please see my previous blog post or the iUI on Google App Engine wiki page.  There's also a nice blog article about the Countdown 2.0 webapp that helped motivate me to do this.   The initial version of Countdown was written at iPhoneDevCamp 3.

No comments:

Post a Comment