我很好奇是否有人知道基于javascript的方法来检测网络体验是作为PWA(渐进式网络应用程序)运行还是只是作为标准移动网站运行(具有完整的浏览器UI)。
安装" PWA之间是否有任何区别?与尚未登记的服务工作者和/或应用程序缓存相比?
答案 0 :(得分:42)
如果这是出于分析目的,您可以在清单文件中设置起始URL以包含查询字符串参数,例如:
"start_url": "./?mode=standalone"
然后在JavaScript中,您可以检查此查询字符串参数。
或者您可以使用以下方法检入JavaScript:
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log("This is running as standalone.");
}
答案 1 :(得分:5)
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log("This is running as standalone.");
}
这个答案是正确的,但值得一提的是PWA可以在多种显示模式下运行:
如果以“全屏”模式运行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
。
答案 2 :(得分:4)
渐进增强更多的是一个概念,而不是涉及多种技术的特定功能或方法。现在,渐进式网络应用程序基于服务工作者,您可以验证浏览器是否支持它。
// Check for browser support of service worker
if ('serviceWorker' in navigator)
项目lighthouse可以帮助您通过执行多种技术的评估来检测应用程序是否渐进增强。看看吧。
希望得到这个帮助,澄清一下。
答案 3 :(得分:4)
这对Chrome和Safari均适用:
const isInStandaloneMode = () =>
(window.matchMedia('(display-mode: standalone)').matches) || (window.navigator.standalone);
if (isInStandaloneMode()) {
console.log("webapp is installed")
}
答案 4 :(得分:0)
在使用Microsoft Visual Studio 2017创建的PWA中,以下语句起作用:
var isPWA = navigator.userAgent.match(/MSAppHost/i);