Make your website an iPhone web application

96

Posted in Development | February 23, 2010

These are a lot of tips to make your website an iPhone app so users can save it on their Home screens and access to your site faster.

Specifying a Webpage Icon for iPhone Home

We have two ways to design a custom icon that users can display on their Home screens using the Web Clip feature:

  • a simple image where iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:
    • rounded corners
    • drop shadow
    • reflective shine

    This is the image for Luscarpa.com:
    iPhone Icon
    and this is how it is on iphone home screen:
    Luscarpa icon on iphone home screen

  • an image precomposed, to this image iPhone doesn’t add effects.
    This is the image precomposed for Luscarpa.com:
    iPhone Icon
    and this is how it is on iphone home screen:
    Luscarpa image precomposed on iphone home screen

How we can provide this image? There are two ways:

  • place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. With this method you specify an icon for the entire website (every page on the website),
  • add a link element to the webpage, as in: 
    <link rel="apple-touch-icon" href="/custom_icon.png"/>

    or

    <link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>

    With this code you specify an icon for a single webpage or replace the website icon with a webpage-specific icon.

Hide Safari Components

Add this line if you want that your web app/website don’t show the safari user interface components:

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

Status Bar Appearance

You can change the Status Bar of web app/website using the following line of code:

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

There are three different colors:

1default

2black

3black-translucent

NOTE: If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Specifying a Startup Image

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:

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

Here an example of my custom startup:
Luscarpa.com Startup Image
The image must be a png file and his dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes

Standalone Detection

You can develope custom features or effects for your standalone version of site, you can detect it using the boolean var window.navigator.standalone from javascript.

Note & Conclusion

All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.

Is my opinion that if you develop a strongly ajax-oriented web application, so to avoid the users from stressing clicking and page refresh, allowing them to use just the “first page” , all these settings can be make your app amazing.

This website uses these options, you can test them adding it to your home screen of iPhone/iPod Touch, actually I’m using wordpress so there isn’t a customization to load all site with ajax so you can see the home page like web application, but if you click on a post link you will be redirect to safari.

Resources