The add to homescreen experience

The emergence of an automatic prompt to a visitor to add your progressive web app to their homescreen is exciting. In the past, Chrome would eventually display a prompt to install a progressive web app, but that has changed recently. The rules determining when the prompt triggers are still valid, but now only trigger the beforeinstallprompt event.

How the user prompt triggers is where each browser can choose a different path. Some of the requirements are defined in the web manifest specification, but the experience is left open ended for browsers to implement as they see fit.

Right now, Chrome has the most mature process. They established the following criteria to automatically trigger the add to homescreen experience:

• Has a web app manifest file with:
  • A short_name (used on the homescreen)
  • A name (used in the banner)
  • A 144 x 144 .png icon (the icon declarations must include a mime type of image/png)
  • Astart_url that loads
• Has a service worker registered on your site:
  • Has a fetch event handler
  • The Fetch event handler cannot be a noop function, it must do something
  • Is served over HTTPS (a requirement for using service worker)
  • Is visited at least twice, with at least five minutes between visits
• FireFox, Samsung, and Opera have similar requirements. FireFox will trigger the experience on Android, but not the desktop. You can allow the experience on desktop, but it is hidden behind a flag.

These browsers typically provide a simple visual queue in the browser's address bar. Here is how FireFox on Android displays the indicator:

Notice how it uses a house with a + to indicate that the site can be installed. To its right, you will also see an Android logo silhouette. The little Android head indicates that an app is available. In this case, it is detecting the PWA I installed from Chrome, which created a WebAPK.