2

Individuals will quickly want to mark this question as a duplicate, but, please read this question first.

I have a PWA. A user can successfully install this app from my website. However, they may visit the website again from their browser. If they do this, Chrome shows a "choose app" icon in place of the "install" icon in the address bar. My question is, can I programmatically detect if the app has been installed?

The common recommendation is to use window.matchMedia('(display-mode: standalone)').matches. However, in the scenario above, the display-mode will be "tab" (i.e. not 'standalone'). I would like to detect if the app is installed in my page and "open" the app just like Chrome does. Is this possible?

Dev
  • 921
  • 4
  • 14
  • 31
  • Does this answer your question? [check if user has already installed PWA to homescreen on Chrome?](https://stackoverflow.com/questions/51735869/check-if-user-has-already-installed-pwa-to-homescreen-on-chrome) – Dai Sep 17 '20 at 13:35
  • Why are you seeing `display-mode: tab` if it's installed? – Dai Sep 17 '20 at 13:35
  • @Dai - No. This points out the solution I mentioned above, which does not meet the case. – Dev Sep 17 '20 at 14:00
  • 1
    @Dai If the app is installed, the `display-mode` is `tab` *if* the user visits the source site in their browser. In this case, I want to provide an "open app" button in my site so they use the PWA instead of the website. – Dev Sep 17 '20 at 14:01
  • Have you looked at the `beforeinstallprompt` event? https://web.dev/customize-install/#listen_for_beforeinstallprompt – Dai Sep 17 '20 at 14:06
  • I think the Chrome UI is also causing some confusion here. You can "install" a PWA, then go to chrome://apps and right click it to not "Open as window". It then exists in a strange state where the app shows as installed but behaves more like a webpage. And the answer shown in @Dai's link no longer applies. – mpr Feb 21 '23 at 15:02

1 Answers1

1

I have an Add to Homescreen library that tries to abstract away all the different browser/platform differences.

It now has a hook/callback in the library that will execute your code if the application can be installed. So, it should not fire that callback if the application is installed.

It also persist an add to homescreen state in localStorage because there is not a real way to really know if the app has been installed or not. The values persisted let A2HS know if the app has been installed from the library. In Edge and Chrome it will know because the beforeInstallPrompt event will not trigger.

https://love2dev.com/pwa/add-to-homescreen-library/

GitHub Repo - https://github.com/docluv/add-to-homescreen

Chris Love
  • 3,740
  • 1
  • 19
  • 16