How To Log Whether PWA Is Being Viewed As A Website Or App

Question

I'm working on a PWA (progressive web app) and I would like to be able to track whether someone is just viewing it as a website or if they installed it and are viewing it as an app.

Is there any way to do this? I can't think of any ways, since they both use the same files (both use manifest.json and manifest.json directs both to the same index.html).

Windows 10 gives the ability for PWAs to be installed from their app store. At that point, you might be able to gather some analytics. Unfortunately, that would be a limited install-base (compared to just installing it from the browser).

Answer 1

Option 1 :

Manifest.json's start url is used only when you are accessing it after adding to home screen. You can have your start url as "https://example.com/myapp?isPWA=true"

In the home page, have logic to read the query param and the flag and do the logic based on that. In the browser mode, this flag will not be present and so the logic should consider false in those case. This is a generic solution for all platforms.

Option 2 :

As an alternate, you can use display-mode detection in JS.

Non Safari (Safari compatibility might be coming in new versions)

CSS Solution

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

JS solution

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('display-mode is standalone');
}

Safari JS solution

if (window.navigator.standalone === true) {
  console.log('display-mode is standalone');
}