您可以检测用户是在浏览器中还是在独立模式下使用您的 PWA。在基于 Chromium 的浏览器（Android 和桌面设备）上，您还可以检测以下事件：
- 安装邀请对话框状态和结果。
- 安装完成。
- 在 PWA 窗口之间进行导航，反之亦然。
- PWA 安装状态。
- 从应用商店安装的相关应用。
您可以将这些数据用于分析、了解用户的偏好并自定义他们的体验。如需捕获这些事件，您可以使用媒体查询、window 中的事件等工具，或者使用此处列出的 capability API。
检测显示模式
如需跟踪用户启动 PWA 的方式，您可以使用 matchMedia() 测试 display-mode 媒体查询。
window.addEventListener('DOMContentLoaded', () => {
let displayMode = 'browser tab';
if (window.matchMedia('(display-mode: standalone)').matches) {
displayMode = 'standalone';
}
// Log launch display mode to analytics
console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});
如果您使用此示例，请记得与您的 Web 应用清单中的显示模式保持一致，例如 standalone、minimal-ui 或 fullscreen。您还可以使用逗号分隔条件匹配媒体查询字符串中的多个查询。
您还可以向清单的 start_url 添加一个查询参数，通过分析来捕获该查询参数，以跟踪有关 PWA 使用时间、方式和使用情况的统计信息。
应用安装
当用户在浏览器中接受安装提示时，基于 Chromium 的浏览器会触发 appinstalled 事件。此事件处理脚本的一个很好的用处就是移除您添加的任何应用安装促销活动。
window.addEventListener('appinstalled', () => {
// If visible, hide the install promotion
hideInAppInstallPromotion();
// Log install to analytics
console.log('INSTALL: Success');
});
请注意，在使用 WebAPK 的 Android 设备上，该事件会在用户接受对话框时触发，而不是在创建并安装 WebAPK 后触发。应用可能需要等待几秒钟才能完全安装完毕。
“安装提示”一章介绍了如何检测安装提示是否可用以及用户做出的选择。
会话转接
用户可以在浏览器中和已安装的独立表单中使用您的 PWA。在桌面浏览器中，您可以使用标记或菜单项在这些上下文之间转移当前导航，如下图所示。
在 Android 上，有一个菜单项与桌面版浏览器中的菜单项类似，用于将导航转移到应用。在这种情况下，系统会打开当前网址，但这将在应用中采用新的页面导航。
在下图中，您可以看到 Android 中已安装该应用时的菜单项。
安装后转移
从桌面浏览器安装时，当前导航会立即转移到应用。浏览器的标签页会关闭，新安装的应用会打开，继续执行用户正在执行的操作。
在移动浏览器中，当您安装应用时，当前导航内容会一直显示在浏览器中。如果用户想要切换到该应用，则需要手动打开该应用，这将会是一次新的导航。
检测传输
如需检测浏览器窗口与窗口之间的传输，您可以使用媒体查询：
window.addEventListener('DOMContentLoaded', () => {
// replace standalone with your display used in manifest
window.matchMedia('(display-mode: standalone)')
.addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
});
iOS 和 iPadOS 存储空间隔离
在 iOS 和 iPadOS 上，浏览器和已安装的图标之间没有导航或网址传输。即使是同一 PWA，用户安装的每个 PWA 图标都有自己的存储空间，与 Safari 的标签页和其他图标隔离开来。 当用户打开“已安装”图标时，系统不会与 Safari 共享存储空间。如果您的 PWA 需要登录，用户需要重新登录。如果应用多次添加到主屏幕，对于每个 PWA 实例，用户都会有不同的会话。
相关应用
网站通过清单表明与应用的关系。为此，请使用 Web 应用清单规范的 related_applications 成员。related_applications 键是表示各个相关应用的对象的数组。每个条目都包含 platform、url 和可选的 id。
以下是可能的平台值：
chrome_web_store：Google Chrome 应用商店。play：Google Play 应用（Android 和 ChromeOS）。chromeos_play：ChromeOS Play。webapp：Web 应用。windows：Microsoft Store（Windows 10 和 11）。f-droid：F-droid。amazon：Amazon AppStore (FireOS)。
更喜欢相关应用
在用户安装应用时，如果您在清单中将 prefer_related_applications 字段设置为 true，则可以将用户重定向到相关应用。使用此设置后，在兼容的浏览器上，安装流程将不会安装 PWA，而是通过您在 related_applications 条目中指定的 url 或 id 触发应用商店安装。
相关应用可能是您的 PWA，它将通过应用商店安装。此配置的优势之一是，目前只有通过应用商店安装的应用才能在备份或切换到新设备时恢复。
{
...
"related_applications:" [
{
"platform": "play",
"url": "https://play.google.com/..."
}
],
"prefer_related_applications": true
}
Apple Smart 应用横幅
Safari 不支持 related_applications 成员，但会为 App Store 中的应用提供智能应用横幅。因此，如果您想推广 PWA 或您已在 App Store 中发布的应用，您可以在 PWA 的 HTML 中添加元标记，以邀请用户安装应用（请参阅刚才提供的链接），或转移导航（如果已安装）。
检测相关已安装应用
借助 getInstalledRelatedApps() 方法，您的网站可以检查用户设备上是否安装了您的 iOS/Android/桌面应用或 PWA。
检查是否已安装相关应用可帮助您实现某些功能，例如隐藏自定义安装的提示，或将用户直接重定向到已安装的应用（而不是转到通用网站）。
如需使用 getInstalledRelatedApps() 方法，已安装的应用和网站都需要配置彼此的连接。每个应用（具体取决于其平台）都包含用于标识网站的元数据，并且网站在清单的 related_applications 字段中包含预期的已安装应用。
BubbleWrap 或 PWA Builder 等工具（可用于将 PWA 发布到应用商店）已经添加了所需的元数据，以便您的网站可以立即使用 getInstalledRelatedApps()。
如要使用 getInstalledRelatedApps() 检测某个 PWA 是否已安装，请在清单 related_applications 字段中使用指向您清单的网址定义 webapp：
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
getInstalledRelatedApps() 会返回应用对象的数组。如果数组为空，则表示未安装相关应用。
const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;
检测在 PWA 范围之外的安装
通过搭载 Android 89 的 Chrome，您可以检测是否安装了 PWA，即使它来自 PWA 范围之外。您的 PWA 必须在 /.well-known/ 文件夹中设置一个 JSON 文件，并将权限授予其他作用域，如这篇文章中所述。