Trigger installation from your PWA

First, add some UI to the app indicating that the user can install it. For example:

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

We're setting the button's hidden attribute, because if the user visits the app with a browser that can't install it, we don't want the install UI to be visible. Next, we'll see how to make the button visible only on browsers that support installing PWAs locally.

As soon as the browser has determined that it can install the app, it fires the beforeinstallprompt event in the global Window scope.

In our main app code, we will listen for this event:

// main.js

let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

The event handler here does three things:

• Call preventDefault() on the event. This prevents the browser from displaying its own install UI.
• Take a reference to the event object that's passed into the handler. This is an instance of BeforeInstallPromptEvent, and is what will enable us to prompt the user to install the app.
• Reveal our in-app install UI by removing the hidden attribute on the button.

Next, we need to add a click handler to our in-app install button:

// main.js

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

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

The installPrompt variable was initialized with the BeforeInstallPromptEvent object in our beforeinstallprompt event handler. If installPrompt hasn't been initialized, for any reason, we do nothing.

Otherwise we call its prompt() method. This shows the install prompt, and returns a Promise which resolves with an object indicating whether the app was installed or not. In particular, its outcome property is "accepted" if the user chose to install the app, or "dismissed" if they dismissed the prompt.

Either way, we must reset our state after calling prompt(), because we can only call it once for each BeforeInstallPromptEvent instance. So we reset our installPrompt variable and hide the install button again.

Depending on the browser and platform, the browser may still offer its own UI to install the app. This means that the app may still be installed without going through our in-app install UI. If this happens, we want to disable the in-app install UI, or we will show it in an app that's already been installed.

To do this we can listen to the appinstalled event, which fires in the global Window scope when the app has been installed:

// main.js

window.addEventListener("appinstalled", () => {
  disableInAppInstallPrompt();
});

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

One case not covered by the above examples is where you have a platform-specific version of the app as well as a web app, and you want to personalize the web app experience depending on whether the platform-specific app is already installed. You might not want to invite users to install the PWA if they already have the platform-specific app installed, and/or you might want to invite them to head over to the platform-specific app to view content.

This can be handled with the Navigator.getInstalledRelatedApps() method, which allows you to detect installed related platform-specific apps (or PWAs) and respond appropriately.

For example:

const relatedApps = await navigator.getInstalledRelatedApps();

// Search for a specific installed platform-specific app
const psApp = relatedApps.find((app) => app.id === "com.example.myapp");

if (psApp) {
  // Update UI as appropriate
}

This method could also be combined with beforeinstallprompt to suppress the browser's install UI based on the availability of a platform-specific app:

window.addEventListener("beforeinstallprompt", async (event) => {
  const relatedApps = await navigator.getInstalledRelatedApps();

  // Search for a specific installed platform-specific app
  const psApp = relatedApps.find((app) => app.id === "com.example.myapp");

  if (psApp) {
    event.preventDefault();
    // Update UI as appropriate
  }
});

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