In Chrome 76 you can hide the Add to Home screen mini-infobar

PJ is a Product Manager on the Chrome Web Platform team responsible for Chrome permissions, notifications and progressive web apps.

TL;DR: We're giving you more control over the PWA Add to Home Screen
mini-infobar. Starting in Chrome 76 (July 2019), you can prevent the
mini-infobar from appearing by calling preventDefault() on the
beforeinstallprompt event.

Background on Progressive Web Apps and the mini-infobar

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
beforeinstallprompt
event.

Changes in Chrome 76

Note: Chrome 76 went to stable in July 2019.

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.

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.

Example of Pinterest using an install banner to promote the installability
of their PWA. See Add to
Home Screen for complete details on the add to home screen flow,
including code samples, and other best practices.

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 prompt() on
the saved beforeinstallprompt event to show the add to home screen modal
dialog.

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.

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had the information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had accurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was easy to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

No

What was the worst thing about this page?

It didn't help me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was missing information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had inaccurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was hard to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

rss_feed
Subscribe to our
RSS or
Atom feed
and get the latest updates in your favorite feed reader!