Install Prompt Moves into Chrome’s Address Bar on Desktop

On desktop, Progressive Web Apps have had a discovery problem: users get no indication that a site is installable, and the install option sits buried inside the three-dot menu. Chrome 76 (beta mid-June 2019) addresses this by placing an install button directly in the address bar, or omnibox.

When a site meets the Progressive Web App installability criteria, Chrome automatically displays an install icon in the address bar. Clicking that icon prompts the user to install the PWA. As with other install flows, developers can listen for the appinstalled event to detect when a user has completed the installation.

Building Your Own Install UI

The built-in address bar button is useful, but you may want to encourage installation yourself—particularly for audiences that return frequently, such as users who open your app several times a week. In those cases, promoting installation within your Web UI is a stronger approach.

To implement a custom install button, listen for the beforeinstallprompt event. When the event fires, keep a reference to it and update your interface to show that the app is installable. The events themselves work the same as before; the new address bar button is simply an additional entry point.

Promotion Patterns for Installs

There are three broad strategies for promoting PWA installation:

  • Automatic browser promotion, such as the new address bar install button.
  • Application UI promotion, where elements inside your app—like banners or header buttons—surface the install option.
  • Inline promotional patterns, which weave install prompts within page content itself.

For details on designing these patterns, see the guidance on Promoting PWA Installation (mobile). That material focuses on mobile, but the patterns translate well to desktop with minimal adjustment.