Fails on Mobile

[mattruddy]

I'm getting a "Unhandled Rejection: Not allowed to prompt" on mobile. Can prompting work on mobile?

[FilipChalupa]

You can't prompt while pwaInstallHandler.canInstall() returns false. This happens on browsers without PWA+prompt support (https://developer.mozilla.org/en-US/docs/Web/API/Window/onbeforeinstallprompt#Browser_compatibility e.g. Firefox, Safari). You must meet browser specific PWA requirements which includes https, valid webmanifest, service worker.

[FilipChalupa]

I highly recommend hiding your custom Add to homescreen button and not calling prompt on page load. Wait for canInstall === true callback.

pwaInstallHandler.addListener((canInstall) => {
	$button.style.display = canInstall ? 'inline-block' : 'none'
})

https://github.com/FilipChalupa/pwa-install-handler#usage

[mattruddy]

Thanks, is there a way to tell if the pwa is already installed?

[FilipChalupa]

Installed PWA will always report false in the listener and pwaInstallHandler.canInstall(). So based on that you should be able not to show your custom install button in already installed app.

[mattruddy]

yes, but then how can you know the difference between if the browers doesnt support prompt() vs its already installed?

I was just thinking, if its already installed, then open up the PWA otherwise display how to install directions

[FilipChalupa]

To check your app is installed, you can do this:

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('display-mode is standalone');
}

It depends on what you have in your webmanifest. https://developer.mozilla.org/en-US/docs/Web/Manifest/display I assume "display": "standalone".