PWA - beforeinstallprompt not called

Are you including the manifest file in the page header?

<link rel="manifest" href="/manifest.json">

Yes, the "start_url" is incorrect in the manifest.

IF ANY PART OF THE MANIFEST IS BROKEN 'beforeinstallprompt' is not fired.

The event is not fired because... the manifest start_url is incorrect.

My favorite way to figure this out is to look in the > NETWORK tab of DevTools for 404's.

AND the other way to see why manifest is broken is to run > AUDIT in DevTools and see what the error is. Like what @sealabr found:

"Failures: Service worker does not successfully serve the manifest's start_url, Timed out waiting for fetched start_url.' Which means the 'start_url"

This thread was a big help troubleshooting production. Thanks.


Along with all of those steps above, also check that the app is uninstalled here: chrome://apps

Just deleting the app from the Chrome Apps folder on your Mac does not seem to remove it from Chrome

If the app was previously installed, the beforeinstallprompt will not be triggered, and no errors will be thrown either :(


Try this :

 <script>
    let deferredPrompt;

    window.addEventListener('beforeinstallprompt', function(event) {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
    });

    // Installation must be done by a user gesture! Here, the button click
    btnAdd.addEventListener('click', (e) => {
      // hide our user interface that shows our A2HS button
      btnAdd.style.display = 'none';
      // Show the prompt
      deferredPrompt.prompt();
      // Wait for the user to respond to the prompt
      deferredPrompt.userChoice
        .then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt');
          } else {
            console.log('User dismissed the A2HS prompt');
          }
          deferredPrompt = null;
        });
    });

    </script>

beforeinstallprompt will only be fired when some conditions are true :

  • The PWA must not already be installed
  • Meets a user engagement heuristic (previously, the user had to interact with the domain for at least 30 seconds, this is not a requirement anymore).
  • Your web app must include a web app manifest.
  • Your web app must be served over a secure HTTPS connection.
  • Has registered a service worker with a fetch event handler.