BeforeInstallPromptEvent
========================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`BeforeInstallPromptEvent`** is the interface of the `beforeinstallprompt` event fired at the `Window` object before a user is prompted to "install" a website to a home screen on mobile.

This interface inherits from the `Event` interface.

Event

BeforeInstallPromptEventConstructor
-----------

`BeforeInstallPromptEvent()`
Non-standard

Experimental

Creates a new `BeforeInstallPromptEvent` object.

Instance properties
-------------------

*Inherits properties from its parent, `Event`.*

`BeforeInstallPromptEvent.platforms` Read only 
Non-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.userChoice` Read only 
Non-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 an `id` of `"install"`. Initially the button is hidden.


```html
<button id="install" hidden>Install</button>
```


The `beforeinstallprompt` handler:

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


```js
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 the `prompt()` method of the stored event object, to trigger the installation prompt.
* Resets its state by clearing the `installPrompt` variable and hiding itself again.


```js
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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Making PWAs installable
* How to provide your own in-app install experience on web.dev (2021)