Native App Install Prompt

The native app install prompt gives you the ability to let users quickly and
seamlessly install your native app on their device directly from the app store,
without leaving the browser, and without showing an annoying interstitial.

What are the criteria?

In order to show the native app install prompt to the user, your site must
meet the following criteria:

The web app nor the native app are already installed.

Meets a user engagement heuristic (currently, the user has interacted
with the domain for at least 30 seconds)

prefer_related_applications

The prefer_related_applications property tells the browser to prompt the
user with your native app instead of the web app. Leaving this value unset,
or false, the browser will prompt the user to install the web app instead.

related_applications

related_applications is an array with a list of objects that tell the
browser about your preferred native application. Each object must include
a platform property and an id property. Where the platform is play
and the id is your Play Store app ID.

Show the install prompt

In order to show the install dialog, you need to:

Listen for the beforeinstallprompt event

Notify the user your native app can be installed with a button or other
element that will generate a user gesture event.

Show the prompt by calling prompt() on the saved beforeinstallprompt
event.

Listen for beforeinstallprompt

If the criteria are met, Chrome will fire a beforeinstallprompt
event, that you can use to indicate your app can be installed, and then prompt
the user to install it.

When the beforeinstallprompt event has fired, save a reference to the event,
and update your user interface to indicate that the user can install your app.

Notify the user your app can be installed

The best way to notify the user your app can be installed is by adding a button
or other element to your user interface. Don't show a full page interstitial
or other elements that may be annoying or distracting.

Success: you may want to wait before showing the prompt to the user,
so you don't distract them from what they're doing. For example, if the user
is in a check-out flow, or creating their account, let them complete that
before interrupting them with the prompt.

Show the prompt

To show the install prompt, call prompt() on the saved event
from within a user gesture. It will show a modal dialog, asking the user
to to add your app to their home screen.

Then, listen for the promise returned by the userChoice property. The
promise returns an object with an outcome property after the prompt has
shown and the user has responded to it.

You can only call prompt() on the deferred event once. If the user dismisses
it, you'll need to wait until the beforeinstallprompt event is fired on
the next page navigation.

The mini-info bar

The mini-infobar

The mini-infobar is an interim experience for Chrome on Android as we work
towards creating a consistent experience across all platforms that includes
an install button into the omnibox.

The mini-infobar is a Chrome UI component and is not controllable by the site,
but can be easily dismissed by the user. Once dismissed by the user, it will
not appear again until a sufficient amount of time has passed
(currently 3 months). The mini-infobar will appear when the site meets the
criteria, regardless of whether you preventDefault() on the
beforeinstallprompt event or not.

Note: The mini-info bar is not displayed on desktop devices.

Special considerations for when using content security policy

If your site has a restrictive Content Security Policy,
make sure to add *.googleusercontent.com to the img-src directive so Chrome
can download the icon associated with your app from the Play Store.

In some cases *.googleusercontent.com maybe more verbose than desired. It's
possible to narrow this down by remote debugging
an Android device to determine the URL of the app icon.

Feedback

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.