Experimental: This is an experimental technology
Check the Browser 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.
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.
BeforeInstallPromptEvent() Creates a new BeforeInstallPromptEvent object.
Inherits properties from its parent, Event.
BeforeInstallPromptEvent.platforms Read only 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 Returns a Promise that resolves to an object describing the user's choice when they were prompted to install the app.
BeforeInstallPromptEvent.prompt() 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.
In the following example an app provides its own install button, which has an id of "install". Initially the button is hidden.
<button id="install" hidden>Install</button>The beforeinstallprompt handler:
BeforeInstallPromptEvent object to a variable, so it can be used laterlet 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:
prompt() method of the stored event object, to trigger the installation prompt.installPrompt 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", "");
});