如何记录PWA是否作为网站或应用程序被查看 [英] How To Log Whether PWA Is Being Viewed As A Website Or App

问题描述

我正在开发PWA(渐进式Web应用程序)，并且希望能够跟踪某人是只是将其作为网站查看还是将其安装并作为应用程序查看.

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.

有没有办法做到这一点?我想不出任何办法，因为它们都使用相同的文件(都使用manifest.json和manifest.json都将它们都指向相同的index.html).

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提供了从其应用商店中安装PWA的功能.到那时，您也许可以收集一些分析数据.不幸的是，那将是一个有限的安装基础(与仅从浏览器进行安装相比).

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:

Manifest.json的起始URL仅在添加到主屏幕后才访问它时使用.您可以将起始网址设为" https://example.com/myapp ?isPWA = true "

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"

在主页中，具有读取查询参数和标志并基于此进行逻辑的逻辑.在浏览器模式下，此标志将不存在，因此在这种情况下逻辑应考虑为false.这是适用于所有平台的通用解决方案.

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.

选项2:

或者，您可以使用显示模式检测在JS中.

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

非Safari(Safari兼容性可能会在新版本中出现)

CSS解决方案

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

JS解决方案

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

Safari JS解决方案

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

这篇关于如何记录PWA是否作为网站或应用程序被查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！