Address Bar Install for Progressive Web Apps on the Desktop

On desktop, there’s typically no indication to a user that a Progressive Web
App is installable, and if it is, the install flow is hidden within the three
dot menu.

In Chrome 76 (beta mid-June 2019), we’re making it easier for users to install
Progressive Web Apps on the desktop by adding an install button to the address
bar (omnibox). If a site meets the
Progressive Web App installability criteria,
Chrome will automatically show an install icon in the address bar. Clicking the
button prompts the user to install the PWA.

Like other install events, you can listen for the appinstalled
event to detect if the user installed your PWA.

Adding your own install prompt

If your PWA has use cases where it’s helpful for a user to install your app,
for example if you have users who use your app more than once a week, you
should be promoting the installation of your PWA within the web UI of your app.

To add your own custom install button, listen for the
beforeinstallprompt event. When it’s fired,
save a reference to the event, and update your user interface to let the user
know they can install your Progressive Web App.

Patterns for promoting the installation of your PWA

There are three key ways you can promote the installation of your PWA:

• Automatic browser promotion, like the address bar install button.
• Application UI promotion, where UI elements appear in the application
  interface, such as banners, buttons in the header or navigation menu, etc.
• Inline promotional patterns interweave promotions within the site content.

Check out Patterns for Promoting PWA Installation (mobile)
for more details. It’s focus is mobile, but many of the patterns are applicable
for desktop, or can be easily modified to work for desktop experiences.

Feedback