Javascript 检查是 PWA 还是 Mobile Web

Question

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

"installed" 的 PWA 与未注册但仍注册了 service worker and/or 应用程序缓存的 PWA 之间有什么区别吗？

Answer 1

Progressive enhancement更多的是一个概念，而不是涉及多种技术的特定功能或方法。现在，渐进式 Web 应用程序基于 service workers，您可以验证浏览器是否支持它。

// Check for browser support of service worker
if ('serviceWorker' in navigator)

Project lighthouse 可以通过对多种技术进行评估来帮助您检测应用程序是否渐进式增强。看看它。

希望这有助于澄清。

Answer 2

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

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

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

已更新 (2020-08-19)

Pete LePage 写了一篇关于如何使用下面的代码在 Google Analytics 中设置自定义维度的博客，该代码使用 window.matchMedia:

检查显示模式

let displayMode = 'browser';
  const mqStandAlone = '(display-mode: standalone)';
  if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
    displayMode = 'standalone';
  }
ga('set', 'dimension1', displayMode);

阅读更多：https://petelepage.com/blog/2020/08/measure-understand-how-installed-pwa-users-differ-from-browser-tab-users/

更新 (2017-01-20):

或者您可以使用以下方式签入 JavaScript：

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

Answer 3

编辑 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 4

在我使用 Microsoft Visual Studio 2017 创建的 PWA 中，以下语句有效：

var isPWA = navigator.userAgent.match(/MSAppHost/i);

Answer 5

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

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

全屏
独立
最小-ui
浏览器

如果您运行您的 PWA 处于 'fullscreen' 模式，它将 return false 因此需要额外检查，例如：

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

请注意，window.matchMedia 检查 return true 'browser' 显示模式，即使它不是已安装的 PWA 应用程序。

Javascript 检查是 PWA 还是 Mobile Web

Javascript to check if PWA or Mobile Web

javascript

progressive-web-apps

已更新 (2020-08-19)

更新 (2017-01-20):