How to use application.IsPWA?

WEB TMS WEB Core
1

I had expected that application.IsPWA would be false if the app was not "installed" by the browser and true otherwise. But it seems to be false in my PWA app whether or not it is installed. So how can I detect when the app has been installed?

2

You can try checking this JavaScript value:

window.navigator.standalone === true

I used this when trying to determine whether to offer the option for Browser Push Notifications which, on iOS, are only possible when an app is installed on the home screen. Check out this blog post for more on that. This bit is at the very, very end.

3

Thanks for the quick response, Andrew. However, it seems that Firefox at least doesn't have that variable defined.

4

Hmmm. Another approach then. There is a CSS property called "display-mode" which can be set to a value of "standalone" and this appears to be supported by Firefox and Chrome. Not sure about Safari. As they say, the great thing about standards is that there are so many to choose from. Here's a link to how it could be used.

5

So far, I've not succeeded in using either of these suggestions. I'll keep beavering away, but it sure would be nice if the subject method would work, TMS!

6

Hmmm.

Just checked out the TMS WEB Core source... It uses the navigator.standalone approach:

    pwa = ('standalone' in window.navigator) && (window.navigator.standalone);

We could probably help them out if we had something that worked across environments. Seems the display-mode approach isn't all that great either - after installing one of my PWA projects under Firefox/Fedora, it didn't return true either. Boo!

Another approach might be to pass a parameter using the PWA's "start_url" setting in its Manifest.json file... Was the latest incantation for this that I've found so far.

Also, note that it might be useful to keep "IsPWA" in some form, but add an "IsInstalled" as a separate function - these are different things, after all.

7

We of course depend on the browsers API here, we'll see if we can find ways to improve this across browsers.

8

Thanks.

9

It seems that the following expression works in Chrome and Edge, but I haven't tested it in Firefox (where Andrew says it doesn't work, IIUC) and I don't know about Safari.

window.matchMedia('(display-mode: standalone)').matches