Web App Install Banners

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.

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"
}

HTML LINK

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.

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.

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.