check if user has already installed PWA to homescreen on Chrome?

Question

I\'m trying to create an \"Add To Home Screen\" button on my progressive web app, as described in Chrome\'s documentation.

I\'m generally following the prescribed p

Answer 1

To answer original question. With latest versions of Chrome you can use window.navigator.getInstalledRelatedApps(). It returns a promise with an array of installed apps that your web app specifies as related in the manifest.json. To enable this to work you need to add related_applications field to manifest.json

  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json"
  }]

And then you can use it like:

//check if browser version supports the api
if ('getInstalledRelatedApps' in window.navigator) {
  const relatedApps = await navigator.getInstalledRelatedApps();
  relatedApps.forEach((app) => {
    //if your PWA exists in the array it is installed
    console.log(app.platform, app.url);
  });
}

Source: API docs

Now you can display some elements depending if your app is installed. E.g: you can display "Open app" button and redirect user to PWA. But remember to disable it when the user is already in the app using @Mathias's answer and checking (display-mode: standalone)

However, regarding your use case. You should display install button only when beforeinstallprompt is intercepted. Browser does not fire this event if the PWA is already installed on the device. And when prompt is fired and choiceResult.outcome === 'accepted' you hide the button again.