# Window: beforeinstallprompt event



The **`beforeinstallprompt`** event fires when the browser has detected that a website can be [installed as a Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable).

There's no guaranteed time this event is fired, but it usually happens on page load.

The typical use for this event is when a web app wants to provide its own in-app UI inviting the user to install the app, rather than the generic one provided by the browser. This enables the app to provide more context about the app, explaining to the user why they might want to install it.

In this scenario, the handler for this event will:

- Keep a reference to the [BeforeInstallPromptEvent](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent) object that's passed into it
- Reveal its in-app installation UI (this should be hidden by default, because not all browsers will support installation).

When the user uses the in-app installation UI to install the app, the in-app installation UI calls the [prompt()](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt) method of the retained `BeforeInstallPromptEvent` object to show the installation prompt.

## Syntax

Use the event name in [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget%2FaddEventListener):

```js-nolint
addEventListener("beforeinstallprompt", (event) => { })
```

Alternatively, assign to the [event handler property](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) of the interface:

```js-nolint
onbeforeinstallprompt = (event) => { }
```

## Event type

A [BeforeInstallPromptEvent](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent). Inherits from [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event).

## Event methods

- [BeforeInstallPromptEvent.prompt()](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt) 
  - : Show a prompt asking the user if they want to install the app. This method returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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()](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/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", "");
});
```

## Specifications

## Browser compatibility

## See also

- [BeforeInstallPromptEvent.prompt](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt)
- [BeforeInstallPromptEvent](https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent)