用于检查PWA或Mobile Web的Javascript

Question

我很好奇是否有人知道基于javascript的方法来检测网络体验是作为PWA(渐进式网络应用程序)运行还是只是作为标准移动网站运行(具有完整的浏览器UI).

"已安装"的PWA与尚未注册的服务工作者和/或应用程序缓存的PWA之间是否存在任何差异？

Answer 1

如果这是出于分析目的,您可以在清单文件中设置起始URL以包含查询字符串参数,例如:

"start_url": "./?mode=standalone"

然后在JavaScript中,您可以检查此查询字符串参数.

更新时间(2017-01-20):

或者,您可以使用以下命令检入JavaScript:

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

Answer 2

编辑2019年10月11日：添加了一个额外的开关来检查应用是否通过TWA启动-document.referrer.includes（'android-app：//'）

这适用于所有人-TWA，Chrome和Safari：

const isInStandaloneMode = () =>
      (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone) || document.referrer.includes('android-app://');

 if (isInStandaloneMode()) {
    console.log("webapp is installed")
}

Answer 3

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

这个答案是正确的，但值得一提的是，PWA 可以在多种显示模式下运行：

• 全屏
• 独立的
• 最小用户界面
• 浏览器

如果您以“全屏”模式运行 PWA，它将返回，false因此需要进行额外的检查，例如：

function isPwa() {
    return ["fullscreen", "standalone", "minimal-ui"].some(
        (displayMode) => window.matchMedia('(display-mode: ' + displayMode + ')').matches
    );
}

请注意，即使不是已安装的 PWA 应用程序，window.matchMedia检查也会返回true“浏览器”显示模式。