如何记录 PWA 是否被视为网站或应用程序
How To Log Whether PWA Is Being Viewed As A Website Or App
我正在开发 PWA(渐进式网络应用程序),我希望能够跟踪是否有人只是将其作为网站查看,或者他们是否安装了它并将其作为应用程序查看。
有什么办法吗?我想不出任何方法,因为它们都使用相同的文件(都使用 manifest.json 和 manifest.json 都指向相同的 index.html)。
Windows 10 允许从他们的应用商店安装 PWA。到那时,您也许可以收集一些分析数据。不幸的是,这将是一个有限的安装基础(与仅从浏览器安装它相比)。
选项 1:
Manifest.json的开始url仅在添加到主屏幕后访问它时使用。您可以将 url 设置为“https://example.com/myapp?isPWA=true”
在主页中,具有读取查询参数和标志的逻辑,并以此为基础执行逻辑。在浏览器模式下,此标志不会出现,因此在这种情况下逻辑应考虑为 false。这是适用于所有平台的通用解决方案。
选项 2:
作为替代,您可以在 JS 中使用 display-mode detection。
非 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(渐进式网络应用程序),我希望能够跟踪是否有人只是将其作为网站查看,或者他们是否安装了它并将其作为应用程序查看。
有什么办法吗?我想不出任何方法,因为它们都使用相同的文件(都使用 manifest.json 和 manifest.json 都指向相同的 index.html)。
Windows 10 允许从他们的应用商店安装 PWA。到那时,您也许可以收集一些分析数据。不幸的是,这将是一个有限的安装基础(与仅从浏览器安装它相比)。
选项 1:
Manifest.json的开始url仅在添加到主屏幕后访问它时使用。您可以将 url 设置为“https://example.com/myapp?isPWA=true”
在主页中,具有读取查询参数和标志的逻辑,并以此为基础执行逻辑。在浏览器模式下,此标志不会出现,因此在这种情况下逻辑应考虑为 false。这是适用于所有平台的通用解决方案。
选项 2:
作为替代,您可以在 JS 中使用 display-mode detection。
非 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');
}