Check if Progressive Web App is Already Installed

Question

I have a popup on my webpage prompting users to install our PWA. However, once it is installed I don't want to ask them again.

How can I check to see if the PWA is already installed?

Answer 1

The following code fixed this issue. First I have my button with id="downloadli" and by default it is hidden or style="display:none"

Since you have to add a listener to the beforeinstallprompt to trigger the install if you piggy back off that action to display the download button it will only work when install is possible.

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

$('#downloadli').css('display', 'block');
});

This way if the app is already installed the beforeinstallprompt is not added to the page and the inside of this block is not run.

Answer 2

You can't check if current user install PWA, But you can check if user is with pwa now with standalone display.

if (window.matchMedia('(display-mode: standalone)').matches) {
  // your code here
}

One solution is the track which users get the click on your button by listening for the beforeinstallprompt event.