Address Bar Install for Progressive Web Apps on the Desktop

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


This content originally appeared on Updates and was authored by Pete LePage

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


This content originally appeared on Updates and was authored by Pete LePage


Print Share Comment Cite Upload Translate Updates
APA

Pete LePage | Sciencx (2019-06-12T00:00:00+00:00) Address Bar Install for Progressive Web Apps on the Desktop. Retrieved from https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/

MLA
" » Address Bar Install for Progressive Web Apps on the Desktop." Pete LePage | Sciencx - Wednesday June 12, 2019, https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/
HARVARD
Pete LePage | Sciencx Wednesday June 12, 2019 » Address Bar Install for Progressive Web Apps on the Desktop., viewed ,<https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/>
VANCOUVER
Pete LePage | Sciencx - » Address Bar Install for Progressive Web Apps on the Desktop. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/
CHICAGO
" » Address Bar Install for Progressive Web Apps on the Desktop." Pete LePage | Sciencx - Accessed . https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/
IEEE
" » Address Bar Install for Progressive Web Apps on the Desktop." Pete LePage | Sciencx [Online]. Available: https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/. [Accessed: ]
rf:citation
» Address Bar Install for Progressive Web Apps on the Desktop | Pete LePage | Sciencx | https://www.scien.cx/2019/06/12/address-bar-install-for-progressive-web-apps-on-the-desktop/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts