Configuring Android Web Applications

Question

iPhone web apps have four configuration features available (not including the HTML5 application cache) to configure how web pages behave when you save the web page to the ho

Answer 1

There are different meta elements that we can use to achieve the best results possible:

1. First of all we need to set the viewport for our app as so:

   <meta name="viewport" content="width=device-width, initial-scale=1">
   

   There is a little hack here, for devices with taller screens (iPhone 5 for example):

   <meta name="viewport" content="initial-scale=1.0">
   

   Just put it under the other meta and it will do all the magic.

2. Now that we have the basics, we will tell the mobile-browsers to "read" our website as if it was an app. There are two main meta elements:

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

   This will make our website to be opened in full-screen-mode and style the default status-bar.

3. We are done with the "behaving" meta elements, now lets start with our icons. The amount of icons and code lines will depend totally on you. For the startup-image I prefered to create one icon for each resolution, so that my "loader" acts the same on all devices (mainly Apple devices). Here's how I did it:

   <!--iPhone 3GS, 2011 iPod Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">
   
   <!--iPhone 4, 4S and 2011 iPod Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">
   
   <!--iPhone 5 and 2012 iPod Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">
   
   <!--iPad landscape-->
   <link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)">
   
   <!--iPad Portrait-->
   <link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">
   

   NOTE: The format must be PNG and all the sizes must be respected, otherwise it will not work.

4. To finish, we will also need some icons for our app. This icon will be displayed on the devices menu. Here's how I did it:

   <!--iPhone 3GS, 2011 iPod Touch and older Android devices-->
   <link rel="apple-touch-icon" href="../images/mobile-icon-57.png">
   
   <!--1st generation iPad, iPad 2 and iPad mini-->
   <link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">
   
   <!--iPhone 4, 4S, 5 and 2012 iPod Touch-->
   <link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">
   
   <!--iPad 3rd and 4th generation-->
   <link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">
   

   NOTE: You can also use "precomposed" for your icon not to be shown with iOS reflective shine. Just add this word where you define rel as so:

   <link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
   

As said, this works better on Apple devices. But the app icon has been proved on Android devices and it works to.

Answer 2

This is a dated question, as such the answer has changed. Chrome on newer androids has it's own meta tags for this. Make sure you Add to the Homescreen, and launch from the homescreen. A normal bookmark is not sufficient. Chrome currently uses a few of the apple directives, but the three at the bottom are the android magic.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="apple-touch-icon" href="youricon.png"/>
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">

<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">

Answer 3

When you create a shortcut on the home screen to a bookmark, Android will use a apple-touch-icon-precomposed if present (but not apple-touch-icon) as a high-res icon:

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

As for the rest of the features, I don't think there's any way to do this at present without publishing an Android app that acts as a wrapper for your website.

Answer 4

I tried the above from my Samsung Galaxy S1

Didn't work for me... but what did work was first creating a bookmark and then adding that bookmark as a shortcut to my home. Doing this caused the correct icon to be used.

Answer 5

This may be of interest to readers:

http://code.google.com/p/android/issues/detail?id=7657

In 2.1-update1, on the Droid, and I presume other 2.* OS phones, when adding a bookmark to the homescreen, the homescreen only displays a custom icon if the link rel="apple-touch-icon" or apple-touch-icon-precomposed have a FULL url path.