Forecast.io: some of the secret sauce revealed

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!

forecast1

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!

forecast2

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.

Advertisements

One thought on “Forecast.io: some of the secret sauce revealed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s