Installation experience

The installation flow

Browsers show an install prompt when installability criteria are met: HTTPS, a valid manifest with name, icons and start_url, and (on some browsers) a service worker. You can customize when and how the prompt appears.

Handle install prompt

Listen to beforeinstallprompt event to show a custom install button.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  // Show your custom install button
  installBtn.style.display = 'block';
});

installBtn.addEventListener('click', () => {
  deferredPrompt.prompt();
  deferredPrompt.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('App installed!');
    }
  });
});

Output:

Custom install button triggers native install prompt on click.

A common trap

Only show install prompts after users engage with your app. Too-eager prompts are dismissed and cannot be shown again for several days.