Creating an Offline Web App for the iPhone

Besides coding in Objective-C on a Mac in order to create native apps for the iPhone, the iPod Touch and the iPad, you also have the option of writing your apps in plain HTML5. This has the added benefit that your app doesn’t have to go through Apple’s scrutinizing approval process before it gets approved to their App Store. However, if your app requires certain low-level system functions, such as file system access or is graphical intensive, etc. then HTML5 may not be an option for you.

HTML5 Example:

<html manifest="cache.manifest">
  <meta charset="utf-8"/>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <link rel="apple-touch-icon" href="icon.jpg"/>
  <link rel="apple-touch-startup-image" href="startup.png"/>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen, handheld"/>
  <title>My Offline Web App</title>
  <div>Some Text</div>
    <label for="myname">My Name:</label><input id="myname" type="text" value=""/><br/>
    <button type="button">A Button</button>
  <script type="text/javascript" src="script.js"></script>

With HTML5 you can create “offline” sites, which means that the client browser – whether it be Safari, Firefox, or anything else – downloads the entire site, or just parts of it, and runs it without actually needing network or Internet access. Only the first time when you access the site you need a network access in order to download the site. After that, your offline web app looks just like a regular (native) app on your iPhone.

The other thing that HTML5 offers is the ability to store data locally (client browser) and without the use of cookies. Data can be stored either in the window.localStorage (where data is stored in the form of key/value pairs, for instance localStorage["myname"] = "John";) or in the local SQLite database, which supports regular looking SQL to create tables and indexes, and to insert, select, delete rows. Note that not all browsers natively come with a SQLite DB, but your Safari browser on the iPhone does. Generally browsers seem to allow up to 5MB of local storage, which is probably plenty of space for most applications.

The first thing you need is a web server to host your HTML5 web site. You will need one that can be (or already is) configured to serve the “text/cache-manifest” content type. This is because in order to run your web site “offline” you need to specify a cache manifest file in the header of your HTML code. This file must then be served as a “text/cache-manifest” content type. It is just a text file and in its simplest form dictates which pages, images, css files, js files, etc. should be downloaded to the browser for offline use.

Example cache.manifest:

# Version 25/08/2011 16:04


Specifically to Apple Mobile devices, you can also specify specific <meta/> tags in the HTML code that allow you to specify a startup image and a springboard icon to go with your web app, for when you save it to your Home Screen. The icon should be 57px x 57px and the startup image must be 320px x 460px. Images can be in either PNG or JPG format. In order to save a web site (or the link to it) to your Home Screen, browse to the web site, then choose “Add to Home Screen” under the “Add Bookmark” option.

Some good resources to delve further into the topics of HTML5 and iPhone web apps are:

Leave a Reply

Your email address will not be published. Required fields are marked *