Progressive Web Apps are easy to install with a new install button in Chrome's address bar (omnibox).


![Pete LePage](https://web.dev/images/authors/petelepage.jpg) Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/)

<br />

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](https://developers.google.com/web/fundamentals/app-install-banners/#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`](https://developers.google.com/web/fundamentals/app-install-banners/#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`](https://developers.google.com/web/fundamentals/app-install-banners/#listen_for_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)](https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile)
for more details. Its focus is mobile, but many of the patterns are applicable
for desktop, or can be easily modified to work for desktop experiences.