Posted July 29, 2015
By Burton Miller

Chrome Add-to-Home-Screen Narrows the Gap Between Web and App

add-to-homescreen-header

The advent of the modern smartphone (2007) created a new user experience that has changed the world: The Mobile App. This user experience is so simple and powerful, it compared only with one other simple, intuitive interface: The Web. Since that time, the App and the Web have been spiraling ever-closer to each other.

At Roost we are an active part of this convergence, and we keep an eye out for interesting developments that make the web more app-like and powerful.

ADD-TO-HOME-SCREEN
Google released a seemingly subtle innovation in late 2013 with Chrome M31 for Android: The ability to add a link to a website to your Android home screen. This may not seem like a big deal, but it is: The one-touch iconic nature of apps gives them unprecedented accessibility. Now websites could now have this experience, too. Apple provides a similar feature on their iDevices.

add-to-homescreen-on-a-site-2add-to-homescreen-add-button-3add-to-homescreen-name-app-4add-to-homescreen-on-homescreen-5

But the playing field was not quite level here. The icon added to the home screen was initially generic one, and it didn’t have the same instant, eye-catching appeal as carefully crafted and sized mobile app icons.
add-to-homescreen-basic-icon-1a

A SOLUTION MANIFESTS
With the release of Chrome M39, Google has provided a simple, elegant solution. By linking a simple manifest document into your webpages, Google will automatically treat your website in a more app-like way on mobile – especially when it is added to the home screen.

Let’s take a look at a sample manifest, and then we’ll review the benefits for each optional entry. The manifest itself uses the ubiquitous JSON format:

{
    "icons": [
    {
      "src": "/images/small/icon-1x.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "/images/small/icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "/images/small/icon-2x.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
  ],
   "name": "The Coolest Site Ever",
   "short_name": "Coolest Site",
   "start_url": "index.html",
   "display": "standalone",
   "orientation": "landscape",
}

ICONS AND NAMES
The first, and most visible effect of this is that your home screen icon can be customized to look like a snazzy app icon – and tailored for different screen resolutions. A few sizes are shown in the sample manifest above, but even more can be specified to fit any device.
add-to-homescreen-icon-closeup-8

The Name and Short Name fields allow your web app to appear on screen and elsewhere in the Android user interface using titles that make sense, and are not abbreviated.

You will definitely want to use these three most basic manifest fields.

START URL
You may want users to open your web app to the page which provides the best app-like experience. If you specify a Start URL, then that is where they will go when clicking your icon. The alternative is the have your app icon treated more like a bookmark to specific content. Your choice.

DISPLAY? MORE THAN MEETS THE EYE
Websites using the Display feature set to ‘standalone’ also open in fullscreen mode, with the browser navigation bar concealed. This subtle aspect of a subtle feature set is not subtle at all when it comes to user experience. It feels good.
add-to-homescreen-no-nav-7

This feature also enables the a website to appear in Android task-switcher, so that you can navigate to it in app-like fashion in a second useful way. Nice.
add-to-homescreen-taskswitcher-6

ORIENTATION
A final tweak is that you can specify a device orientation in the manifest – locking your web experience in portrait or landscape, if that makes the most sense for your site.

INSTALL BANNER
With a little extra work, you can display an app-like install banner on your site (added in M42), as described here. This closes the circle on the add-to-home-screen feature, providing a visible app-centric prompt for installing to the mobile desktop.
add-to-homescreen-banner-9

ADDING THE MANIFEST TO YOUR PAGES
Including the manifest document is extremely simple, and should pose no difficulties. Simply the link the manifest document in your header template, so that it will work from all your site’s pages:

<link rel="manifest" href="manifest.json">

Google provides more details on the manifest here. This is definitely a quick and easy mobile upgrade for almost any website. While I was writing this article, I created a manifest for our own Roost website in about 15 minutes. Most of the time was making sure I had links to the right images for the icons. Nifty stuff, Google — keep up the good work.

WEB AND APP BECOME ONE
Apps are increasingly laden with HTML and CSS. Websites are built to behave in a more app-like style, and are including more native features. Apps and websites are borrowing more and more from each other, seeking the best of both worlds.

This add-to-home-screen technology is a cool and useful aspect of the ongoing merger of websites with mobile apps.

Next Step

Please enter a credit card below. Your card won’t be charged until after your trial period ends.

Get Started

Create an account

Try Roost free for 14 days, cancel anytime.