Make your web app look like an Stand Alone application on Mobile devices (Android, iOS)

Mobile devices have the availability to add a web page to home screen, and your web application can specify how to behave once this happens.

There is a simple configuration for Android and iOS that will make your app look as a Mobile Application.

For Android devices.
You need a manifest.json file that will contain the details of your application, here is an example:

{
  "name": "A|G Fitness",
  "short_name": "A|G",
  "icons": [{
        "src": "images/touch/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "images/touch/apple-touch-icon.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "images/touch/chrome-touch-icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }],
  "start_url": "/#!/",
  "display": "standalone"
}


Then on your web page you need to add some meta details inside your head as follows:
   <%-- Meta details to set add to home on Android Mobile devices as stand alone application --%>
   <meta name="theme-color" content="#4d4d4d">

This will tell the Android Device:

  • The name of the Application via short_name
  • The icon that will be used, based on device screen resolution
  • The start_url for the application to start
  • And at last to behave as stand alone application and not inside a browser.
  • theme-color that will be the status bar background color on your Android device.
  • Point your page to your manifest so it can be read by the Android device.


And that's it. You need to do anything afterwards, but is worth to mention that this functionality works on chrome browser, other browsers does not support this feature yet.
This is how you add it to your home Screen:
 
This is how looks like on home Screen:

And This is how it looks when it runs as Mobile Stand alone application.

 


For iOS Devices is a little bit different, but it can be accomplished, but instead of using manifest.json you need some metadata to make it works:

<%-- Meta details to set add to home on iOS Mobile devices as stand alone application --%>
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-title" content="A|G">

This will tell the iOS Device:

  • apple-mobile-web-app-capable will make it run as stand alone application
  • apple-mobile-web-app-status-bar-style will define the color of the status bar
  • apple-mobile-web-app-title is the title of the name of the application on home Screen
  • apple-touch-icon this is the icon that will be used on home screen
  • /ux/js/ux.main.links.js it is a script that will make all the links on your app stay on stand alone, this is needed to make the application stay as standalone, otherwise it will open new links on a tab, the code for this is on GitHub at https://gist.github.com/irae/1042167

As in Android Safari is the browser that support the add to home screen feature, this will not work on chrome since is not the native iOS browser.

Unfortunately I do not have an iOS device handy to show the screenshots as in Android, but believe it works the same, the only thing is that if you are running over https and your certificate is not trusted the icon will not be used, it will use an screenshot of the page instead.

Refer to https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html for ios related code
And for Android at https://developer.chrome.com/multidevice/android/installtohomescreen

Comments

Post a Comment