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.

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.

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.

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.

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 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!

Dimitar Ivanov

Dimitar Ivanov is a senior LAMP developer, javascript engineer, web performance-obsessed.
He is programming since 2003 and loves to build web applications.
You can find him on Twitter,
LinkedIn and
GitHub.

Subscribe to our newsletter

Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.

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.