9

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).

Anand
  • 9,672
  • 4
  • 55
  • 75
doubleJ
  • 1,190
  • 1
  • 16
  • 29

1 Answers1

9

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');
}
Anand
  • 9,672
  • 4
  • 55
  • 75
  • 1
    Option 1 was my first thought. I set `"start_url": "./index.html?source=pwa",` in my manifest.json. Then, I had some javascript to connect to my server and log that the source was pwa (based on the usage of that query string). Unfortunately, viewing the site with my browser (Microsoft Edge) from my computer resulted in logging the source as pwa (exactly what I wasn't wanting to happen). I'll have to test out the display-mode detection stuff. – doubleJ Jul 03 '18 at 20:13
  • 1
    you mean to say edge is using your start_url's query param added even when you access your site as https://example.com in browser? I couldn't imagine how that would be possible. That attribute is meant to set the home page of PWA installed app. – Anand Jul 03 '18 at 20:22
  • 1
    I didn't test any other browsers, because it wasn't working with Edge. Yes, though, Edge launched my logging code that was based on the query string. – doubleJ Jul 03 '18 at 20:45
  • 2
    Option 2 `display-mode detection` worked exactly as advertised. Loading the page from the browser (Edge and Chrome) resulted in being logged as a website. Using Chrome to `Add To Homescreen` and launching resulted in being logged as an app. – doubleJ Jul 03 '18 at 20:47
  • Based on https://caniuse.com/matchmedia there is now Safari support and so option 2 should work for all cases – Edward Moffett Dec 12 '22 at 18:40
  • The range of display modes can be broadened to catch all non 'browser' modes with `@media not all and (display-mode: browser) { /* Your CSS */ }` – Edward Moffett Dec 13 '22 at 10:00