Today I dug around the source code of forecast.io a bit, and learned about some easy wins that contribute to the native-like web app experience on my iPhone. Check out the code and see whether you want to use in your mobile web apps!
Note that I’ve only verified these behaviors on iOS. And as the tagging suggests, it probably is meant to only work in iOS. Anyone know whether the same behavior can be achieved on Android devices?
Hiding the Safari browser chrome and address bar
This screenshot shows the runtime experience of Forecast.io on an iPhone. Note that there is no browser chrome or address bar to be seen!
How is this done? Here’s the meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
That’s all there is to it!
Displaying a custom icon in the app drawer
The next screenshot shows what you see after running Forecast.io, then returning to your home screen, then double-clicking on your home screen button to reveal the app drawer. There’s a Forecast.io app icon there!
And here’s how that’s done:
<link rel="apple-touch-icon-precomposed" href="http://forecast.io/images/icons/54.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://forecast.io/images/icons/72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://forecast.io/images/icons/114.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://forecast.io/images/icons/144.png">
Note the support for both regular and Retina home screen icons.
So with these two little snippets of code placed before your page’s </head> tag, you can achieve the same native-like user experience with a web app on an iOS device as Forecast.io.