Making HTML5 Apps Appear Native on iOS

In version 6 of iOS, Apple added a simple, but powerful new feature allowing HTML5 webpages, saved to the home screen, to look like native apps. One of the best apps doing this right now is weather app (try opening it on your iOS device). Today’s article describes how you can make your HTML5 apps look native when they are saved on and opened from the home screen.

How do it…

Set some HTML meta tags to tell Safari to hide the chrome and status bar, when an app is opened from the home screen:

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

Make sure to include an icon to be shown on the home screen for the app:

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

Multiple icon sizes can be specified for each iOS platform (but are not necessary):

<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-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Also, specify a splash screen to show while the application is loading (320 x 460 pixels):

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

That is all you need to do. But you may want to use JavaScript to show a message indicating that the app should be saved to the home screen when an iOS device is viewing the page in regular Safari:

if (window.navigator.standalone === false) {
    // write logic to show a dialog
    // I suggest a centered, fixed position div at the bottom
    // that goes away on touch or click events

How it works…

For the most part iOS and Safari take care of everything for you when specifying the correct meta and link elements. The apple-mobile-web-app-capable and apple-mobile-web-app-status-bar-style properties handle hiding the Safari chrome, while the apple-touch-icon and apple-touch-startup-image properties handles rendering the home screen icon(s) and splash screen for the app.

Using the window.navigator.standalone JavaScript property and showing a message is entirely up to you and your implementation. However, I think it improves the user experience and promotes users including your app on their home screen. We check window.navigator.standalone for false using the triple equals, because the value will be undefined in non-iOS 6+ browsers and we do not want to show any message for those browsers.

To try everything out, I have added these features to this website. I have not added any special mobile styling or behavior yet, but I hope to have time later this week to remove the sidebar, decrease the width (for better resolution), and use left/right swiping to navigate between articles.

There’s more…

You may also link to other apps using regular anchor tags with special prefixed urls (Apple URL Scheme Reference. Here is an example providing links for calling or texting a number:

<a href="tel:1-408-555-5555">Call 408-555-5555</a>
<a href="sms:1-408-555-5555">Text 408-555-5555</a>

For the complete documentation from apple, see Configuring Web Applications.