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!


2 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.

Leave a comment

Captcha