Warning
The recipe is marked that it needs to be reviewed. The provided information may be incomplete and/or outdated. Help us improve it!
Read the recipe carefully and report any improvements that could be made.

Problem

You want to create a web application for iOS but don't know where to start.
What is the basic setup for an iPhone web app?

Solution

There is a couple of HTML meta tags, which control the behaviour and appearance of your app. You can configure the following parts of your app to blend it into iOS more natively:

  • The app title to be displayed in iOS
  • Set an app icon to be displayed in iOS
  • Setting a splash screen to be shown while the app is loading
  • Making the application go fullscreen and remove safaris browser controls
  • Configuring the appearance of the iPhone status bar to better fit to your application
  • Setting up viewport options, whether the app should be zoomable and other options.

Discussion

This settings only apply, if the web app has been "installed" on the phone. This means bookmarked on the homescreen.

Setting the application title

Well, this couldn't be easier: The <title></title> tag in your apps' HTML document sets the application title.

Setting the application icon

The different iOS device types need different icon sizes:

  • iPhone without retina display: 57x57px
  • iPhone with retina display: 114x114px
  • iPad: 72x72px

Simply put three <link> tags in the <head> section of your app document:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

You don't have to include rounded corners in your icons - they will be added automatically by iOS. A glossy effect will be added to your icon by default. To turn this off, change the rel attribute to "apple-touch-icon-precomposed".

iOS will search by default automatically in your apps root folder for icons with the name convention "apple-touch-icon.png" or "apple-touch-icon-precomposed.png".

Setting up the application splash screen

A drawback of the web applications on iOS devices are, that whenever you jump out of the app, it is re-initialized again. This means it takes a few seconds to load it over the web.
You can minimize this loading-time by heavily utilizing the localStorage, but thats stuff for another recipe.

While the application is loading, it shows a blank white screen by default. This is pretty ugly, but luckily we can setup a splash screen to be shown until the application is loaded.
Set it up as usual in the <head> section of your document:

<link rel="apple-touch-startup-image" href="my-splash-image.png" />

The resolution of the image should be 640x960px in scale, to look good on retina displays, 620x640 for the older iPhone models and 1024x768 for the iPad.
You can detect the correct device type on your server by parsing the request headers an your app.

Hide safaris control elements

To remove the browser control elements of safari and save up much space on the display, add the following meta tag to your applications head:

<meta name="apple-mobile-web-app-capable" content="yes" />

Notice: This will only take effect if your app has been bookmarked and run from the homescreen.

Configuring the status bar

After you have hidden the safari control elements and running the application from the homescreen, you have the possibility to change the appearance of the iPhone/iPad status bar, too, by adding the following meta tag:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

The available options for the status bars' appearance are: * "default" - This displays the default grey status bar. * "black" - This displays the status bar in black and white * "translucent black" - Allows your application to use the full screen and makes the statusbar rendered transparently on top of it.


References