用于检查PWA或Mobile Web的Javascript

Question

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

安装＆＃34; 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

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

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

• 全屏
• 独立
• minimum-ui
• 浏览器

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

function isPwa() {
    var displayModes = ["fullscreen", "standalone", "minimal-ui"];
    displayModes.forEach(function(displayMode) {
        if (window.matchMedia('(display-mode: ' + displayMode + ')').matches) {
            return true;
        }
    });
    return false;
}

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

Answer 3

渐进增强更多的是一个概念，而不是涉及多种技术的特定功能或方法。现在，渐进式网络应用程序基于服务工作者，您可以验证浏览器是否支持它。

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

项目lighthouse可以帮助您通过执行多种技术的评估来检测应用程序是否渐进增强。看看吧。

希望得到这个帮助，澄清一下。

Answer 4

这对Chrome和Safari均适用：

const isInStandaloneMode = () =>
      (window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);

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

Answer 5

在使用Microsoft Visual Studio 2017创建的PWA中，以下语句起作用：

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