检测

您可以检测用户是在浏览器中使用 PWA，还是以独立模式使用 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 添加一个查询参数，以便使用 Analytics 捕获该参数，以便跟踪有关 PWA 使用时间、方式和使用量的统计信息。

注意 ：如果您在 start_url 上使用查询参数来捕获指标，请确保在清单中设置 id 字段以唯一标识您的应用。请参阅使用 Web 应用清单 ID 属性唯一标识 PWA 一文，了解如何设置此字段。

应用安装

当用户在浏览器中接受安装提示后，在基于 Chromium 的浏览器上会触发 appinstalled 事件。此事件处理脚本的一个重要用途是移除您添加的任何应用内安装推广信息。

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

请记住，在支持 WebAPK 的 Android 设备上，该事件会在用户接受对话框时触发，而不是在生成和安装 WebAPK 后触发。完全安装可能会有几秒钟的延迟。

安装提示一章介绍了如何检测安装提示是否可用以及用户做出的选择。

警告 ：appinstalled 事件仅适用于基于 Chromium 的浏览器，并且是清单规范孵化器的一部分

会话转移

用户可以在浏览器内以及已安装的独立表单中使用您的 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 实例，用户都将有不同的会话。

相关应用

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 倍
• <ph type="x-smartling-placeholder"></ph> 79 个
• <ph type="x-smartling-placeholder"></ph> 倍
• <ph type="x-smartling-placeholder"></ph> 倍

来源

网站通过清单表明与应用的关系。为此，请使用 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
}

注意 ：仅将 prefer_related_applications: true 与 webapp 首选应用搭配使用不会对 PWA 的提供和安装方式产生任何影响。

Apple 智能应用横幅

Safari 不支持 related_applications 成员，但可为 App Store 中的应用提供智能应用横幅。因此，如果您想推广您在 App Store 中发布的 PWA 或其他应用，可以在 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 文件，以便为其他范围授予权限。

资源

• 用户是否已安装您的应用？getINSTALLRelatedApps() 告诉您！
• MDN：相关应用
• MDN：AppInstalled 事件
• Apple：使用智能应用横幅广告宣传应用