Categories

Web App Install Banners

Posted on: April 17, 2017 by Dimitar Ivanov

Enable Add to Home Screen

You've may see already web sites that prompt mobile device users to add a Progressive Web App to their home screen. Since this is a new way to engage and retain users, this article will describe how to enable add to home screen.

Chrome - Add to Home Screen
Figure 1. Chrome - Add to Home Screen
What are the requirements?

To make a web app install banner to appear on mobile devices your site must met the following requirements:

  • HTTPS - a secure connection. If your have not yet installed a SSL on your web server, you can consider the Let's Encrypt - an open certificate authority that offers free SSL/TLS certificates.
  • Manifest - a valid manifest file with following properties: short_name, name, start_url and icons (at least 1 icon in PNG format, with size of 144x144)
  • Service Worker - a valid service worker must be registered on your website.

Manifest.json

A simple text file in JSON format. Here are the available properties:

  • short_name - a title used on the users home screen
  • name - a title used in the banner and the splash screen
  • icons - used for home screen icon and the splash screen. An array of objects, each having following properties: src, type and sizes
  • background_color - the background color used in the splash screen
  • theme_color - the color of your browser's address bar
  • display - used to customize the display type. Valid values are: fullscreen, standalone, minimal-ui, browser.
  • orientation - defines the default orientation of your app. Orientation may be one of the following values: any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary.
  • start_url - the URL that loads
{
  "short_name": "Zino UI",
  "name": "Zino UI - a jQuery components library",
  "icons": [
    {
      "src": "https://static.zinoui.com/img/logos/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    }
  ],
  "background_color": "#FFFFFF",
  "theme_color": "#67BCFF",
  "display": "standalone",
  "start_url": "/?utm_source=homescreen"
}

To make a user's browser knows about your manifest add a HTML link element to all of your web pages.

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

To test the manifest open the Chrome DevTools and go to Application / Manifest. There you can see a preview of your manifest as shown below.

Chrome DevTools - App Manifest
Figure 2. Chrome DevTools - App Manifest

Service Worker

A service worker is a JavaScript program runned by the browser, separately from a web page. It's used for cool stuff as push notifications and background sync. In fact, to make a web app install banner to work, you need just an empty service worker file service-worker.js.

Install Banner

To install banner on mobile devices the web app must register a service worker as shown below.

if ("serviceWorker" in navigator) {
    window.addEventListener("load", function () {
        navigator.serviceWorker.register("/service-worker.js");
    });
}

To see if the service worker is installed correctly open again the Chrome DevTools and go to Application / Service Workers. There you can see the service worker status and all the running clients.

Chrome DevTools - Service Worker
Figure 3. Chrome DevTools - Service Worker
Conclusion

Finally, the web app install banner is a good way to engage and retain users on mobile devices and an important part of a Progressive Web Apps.

See also
Share this post

If you have questions about Web App Install Banner, leave a comment below. And do not be shy to share this article. Thanks so much for reading!


3 Comments

O. M.
Why must we have HTTPS for it? Can't do it without HTTPS?
Dimitar Ivanov
Dimitar Ivanov June 24, 2017 at 00:46 am
@O. M.

The reason is that the service workers only run over HTTPS, for security reasons. However, during development, you'll be able to use service worker through localhost.
Muhammad Talha Afzal
Muhammad Talha Afzal December 23, 2017 at 00:47 am
Does it work on localhost if service-worker.js file is empty. Because i am trying on localhost and i can see service-worker and manifest is registered perfectly but still i didn't get the install banner.

Leave a comment

Captcha