Background on Progressive Web Apps and the mini-infobar
Progressive Web Apps (PWA) are a pattern for creating app-like, instant loading, reliable and installable websites.
When your PWA passes the installability checklist on Android, a Chrome system dialog called the mini-infobar will appear at the bottom of the browser window.
Today the Add to Home screen mini-infobar is shown at the same time as the
Changes in Chrome 76
We’ve been listening to our community and what we heard was that developers want more control over when to ask users to install a PWA. We heard you!
Starting in Chrome 76, you can prevent the mini-infobar by calling
preventDefault() on the
beforeinstallprompt event can help you promote the installation of your
progressive web app, making it easy for users to add it to their home screen.
Our community has shared that users who install a PWA to the home screen are
highly engaged, with more repeat visits, time spent in the app and when
applicable, higher conversion rates.
To promote your web app without the mini-infobar, listen for the
beforeinstallprompt event, then, save the event. Next, update your user
interface to indicate your PWA can be installed, for example by adding an
install button, showing an install banner, using in-feed promotions, or a
menu option. When the user clicks on the install element, call
beforeinstallprompt event to show the add to home screen modal
Future of the Add to Home screen mini-infobar
The use of the add to home screen infobar is still a temporary measure. We’re experimenting with new UI patterns that will continue to give Progressive Web App users the ability to install, and do this in a way that reduces clutter in the browsing experience.