search

FilipChalupa / pwa-install-handler

Handling PWA installation prompt made easier.
https://www.npmjs.com/package/pwa-install-handler
9 stars 0 forks source link

Fails on Mobile #1

Open mattruddy opened 4 years ago

mattruddy commented 4 years ago

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

FilipChalupa commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

FilipChalupa commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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".