BeforeInstallPromptEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

TheBeforeInstallPromptEvent is the interface of thebeforeinstallprompt event fired at theWindow object before a user is prompted to "install" a website to a home screen on mobile.

This interface inherits from theEvent interface.

Constructor

BeforeInstallPromptEvent()Non-standard Experimental: Creates a newBeforeInstallPromptEvent object.

Instance properties

Inherits properties from its parent,Event.

BeforeInstallPromptEvent.platformsRead onlyNon-standard Experimental: Returns an array of string items containing the platforms on which the event was dispatched. This is provided for user agents that want to present a choice of versions to the user such as, for example, "web" or "play" which would allow the user to choose between a web version or an Android version.
BeforeInstallPromptEvent.userChoiceRead onlyNon-standard Experimental: Returns a Promise that resolves to an object describing the user's choice when they were prompted to install the app.

Instance methods

BeforeInstallPromptEvent.prompt()Non-standard Experimental: Show a prompt asking the user if they want to install the app. This method returns a Promise that resolves to an object describing the user's choice when they were prompted to install the app.

Examples

In the following example an app provides its own install button, which has anid of"install". Initially the button is hidden.

html

<button hidden>Install</button>

Thebeforeinstallprompt handler:

Cancels the event, which prevents the browser displaying its own install UI on some platforms
Assigns theBeforeInstallPromptEvent object to a variable, so it can be used later
Reveals the app's install button.

let installPrompt = null;const installButton = document.querySelector("#install");window.addEventListener("beforeinstallprompt", (event) => {  event.preventDefault();  installPrompt = event;  installButton.removeAttribute("hidden");});

When clicked, the app's install button:

Calls theprompt() method of the stored event object, to trigger the installation prompt.
Resets its state by clearing theinstallPrompt variable and hiding itself again.

installButton.addEventListener("click", async () => {  if (!installPrompt) {    return;  }  const result = await installPrompt.prompt();  console.log(`Install prompt was: ${result.outcome}`);  installPrompt = null;  installButton.setAttribute("hidden", "");});

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Oct 25, 2023⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換