Chrome for Android 31 (currently in the beta channel) added the ability to add a web application to the home screen, which iOS fans will notice it had been available for years on their fruity phones.

Upgrading a SmartMS application to allow installing on the Android Home Screen is very straightforward.

Adding the Meta

In your index.html template, you will already have a meta for iOS mobile web apps. Currently that’s good enough for Chrome, but Google warns it may not be supported in the future, so you should add the new standard meta:

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

The meta name MUST be exactly “mobile-web-app-capable” and the content name must be “yes” (case in-sensitive), otherwise, the web app will be added as a regular bookmark.

Home Screen Icons

Recommend icons size is 196×196, but you can provide several icons, and I’ve found my Nexus 4 didn’t pick the 196×196 icon, but the 72×72, probably because that’s the one that fits my home screen settings best, so you probably should provide several icons anyway.

The Android Asset Studio has a launcher icon generator, which can turn a flat square image into icons at various resolutions, 196×196 isn’t part of the pack, so if you want it, you’ll have to resize it yourself.

You can then add the relevant link entries, f.i.:

<link rel="apple-touch-icon-precomposed" href="res/icon_72.png">
<link rel="shortcut icon" sizes="72x72" href="res/icon_72.png">
<link rel="shortcut icon" sizes="128x128" href="res/icon_128.png">
<link rel="shortcut icon" sizes="196x196" href="res/icon_196.png">

That’s it Folks

The “add to home screen” options will now work, your app will run full-screen, with a regular home screen button, a separate entry in the Android task view, etc. Check the Google developers page for the complete list of goodies.

If you want to be capable of running fully offline, you’ll need to provide a cache manifest (same as iOS one), and if you need something more advanced, there is a new AppCache API, where you get dynamic and fine-grained control over the app-cache, ie. over how, when and what you will update.

I’ve just updated my simple Nickel Iron game if you want to try it live.