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

穿精又带淫゛_ 提交于 2019-12-22 06:09:29

问题


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


回答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');
}


来源:https://stackoverflow.com/questions/51159379/how-to-log-whether-pwa-is-being-viewed-as-a-website-or-app

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!