您的应用是否已安装？getInstalledRelatedApps() 会告诉您！

借助 getInstalledRelatedApps() 方法，您的网站可以检查 您的 iOS/Android/桌面应用或 PWA 已安装在用户的设备上。

Pete LePage

什么是 getInstalledRelatedApps() API？

</ph> <ph type="x-smartling-placeholder">

getInstalledRelatedApps()可让您的网页 检查您的移动应用还是桌面应用，在某些情况下， Web 应用 (PWA) 已安装在用户的设备上，您可以使用 自定义用户体验

例如，如果您的应用已经安装：

• 将用户从产品营销页面直接重定向至您的应用。
• 将一些功能（例如通知）集中在其他应用中， 防止出现重复的通知。
• 在以下情况下，不得宣传安装您的 PWA： 已安装其他应用。

如需使用 getInstalledRelatedApps() API，您需要向您的应用说明 然后向网站介绍您的应用定义 您可以检查该应用是否已安装。

您可以查看的受支持应用类型

检查您的 Android 应用是否已安装

您的网站可以检查是否已安装您的 Android 应用。

向 Android 应用介绍您的网站

首先，您需要更新 Android 应用来定义关系 使用 Digital Asset Links 系统。这样可以确保 可以检查您的 Android 应用是否已安装。

在 Android 应用的 AndroidManifest.xml 中，添加 asset_statements 条目：

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

然后，在 strings.xml 中添加以下资产语句，将 site 更新为 您的域名。请务必添加转义字符。

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

完成后，将更新后的 Android 应用发布到 Play 商店。

在网站上介绍您的 Android 应用

接下来，通过以下方式向您的网站介绍您的 Android 应用： 添加 Web 应用清单到页面。清单必须 包含 related_applications 属性，该属性是一个用于提供详细信息的数组， 包括 platform 和 id。

• platform 必须为 play
• id 是您的 Android 应用的 Google Play 应用 ID

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

检查您的应用是否已安装

最后，调用 navigator.getInstalledRelatedApps() 以检查 Android 应用已安装。

试用演示版

检查您的 Windows (UWP) 应用是否已安装

您的网站可以检查是否已安装 Windows 应用（使用 UWP 构建）。

向 Windows 应用介绍您的网站

您将需要更新您的 Windows 应用，以定义您的 网站和 Windows 应用使用 URI 处理程序。本次 确保只有您的网站可以检查您的 Windows 应用是否已安装。

将 Windows.appUriHandler 扩展注册添加到应用的清单 文件：Package.appxmanifest。例如，如果您的网站地址是 example.com，则可以在应用的清单中添加以下条目：

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

请注意，您可能需要将 uap3 命名空间添加到您的 <Package> 属性。

然后，创建一个 JSON 文件（没有 .json 文件扩展名），名为 windows-app-web-link，并提供应用的软件包系列名称。地点 该文件放在您的服务器根目录中或 /.well-known/ 目录中。您 可以在应用清单的“打包”部分找到软件包系列名称 设计。

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

如需了解更多详情，请参阅使用应用 URI 处理程序允许网站访问应用 了解有关设置 URI 处理程序的完整详情。

在您的网站上介绍 Windows 应用

然后，通过以下方式向您的网站介绍您的 Windows 应用： 添加 Web 应用清单到页面。清单必须 包含 related_applications 属性，这是一个用于提供详细信息的数组 包括 platform 和 id。

• platform 必须为 windows
• id 是应用的软件包系列名称，后跟 <Application> Id 值。Package.appxmanifest

{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

检查您的应用是否已安装

最后，调用 navigator.getInstalledRelatedApps() 以检查 已安装 Windows 应用。

检查您的 Progressive Web App 是否已经安装（在范围内）

您的 PWA 可以检查它是否已安装。在此例中，网页 必须位于同一网域，并在范围内提出请求 Web 应用清单中的范围所定义。

向 PWA 介绍自身

在您的 PWA 中添加related_applications条目 PWA Web 应用清单。

• platform 必须为 webapp
• url 是 PWA 的 Web 应用清单的完整路径

{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  …
}

检查是否已安装 PWA

最后，从navigator.getInstalledRelatedApps() 作用域，以检查是否已安装该 PWA。如果 getInstalledRelatedApps() 在 PWA 的范围内被调用，它会 return false。有关详情，请参见下文。

试用演示版

检查 Progressive Web App 是否已安装（不在范围内）

您的网站可以检查您的 PWA 是否已安装，即使网页在 PWA 的范围。例如，通过 /landing/ 可以检查是否已安装 /pwa/ 提供的 PWA，或者您的 着陆页从 www.example.com 投放，您的 PWA 从以下来源投放： app.example.com。

向 PWA 介绍您的网站

首先，您需要将数字资产链接添加到 PWA 所在的服务器 。这有助于明确您的网站与 您的 PWA，并确保只有您的网站可以检查您的 PWA 是否已安装。

将 assetlinks.json 文件添加到 /.well-known/ 目录 PWA 所在网域的属性，例如 app.example.com。在site中 属性，请提供将执行 检查（不是 PWA 的 Web 应用清单）。

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

向您的网站介绍 PWA

接下来，通过以下方式向您的网站介绍 PWA 应用 添加 Web 应用清单到页面。清单必须 包含 related_applications 属性，该属性是一个用于提供详细信息的数组， 您的 PWA，包括 platform 和 url。

• platform 必须为 webapp
• url 是 PWA 的 Web 应用清单的完整路径

{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

检查是否已安装 PWA

最后，调用 navigator.getInstalledRelatedApps() 以检查 已安装 PWA。

试用演示版

调用 getInstalledRelatedApps()

调用 navigator.getInstalledRelatedApps() 会返回一个 promise， 通过用户设备上安装的一组应用解析。

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

为了防止网站测试过于宽泛的应用， 只有 Web 应用清单中声明的前三个应用 所有指标

与大多数其他强大的 Web API 一样，getInstalledRelatedApps() API 也 仅在通过 HTTPS 提供时可用。

还有问题吗？

仍有疑问？查看 StackOverflow 上的 getInstalledRelatedApps 标记 看看其他人是否也有过类似的问题。如果没有，请询问您的 问题，并务必使用 progressive-web-apps 标记之间。我们的团队会经常监控 标签并尝试回答您的问题。

反馈

您在 Chrome 的实现过程中是否发现了错误？还是 与规范不同？

• 访问 https://new.crbug.com 提交 bug。尽可能多包含 提供重现错误的简单说明，以及 在组件框中输入 Mobile>WebAPKs。故障 非常适合分享快速、简单的重现。

表示对 API 的支持

您打算使用 getInstalledRelatedApps() API 吗？你的公开 有助于 Chrome 团队确定各项功能的优先级，并显示其他 浏览器供应商支持这些技术的重要性。

• 在 WICG Discourse 会话中说明您计划如何使用此 API。
• 使用 # 标签向 @ChromiumDev 发送推文 #getInstalledRelatedApps 并告诉我们您使用它的地点和方式。

实用链接

• getInstalledRelatedApps() API 的公开说明
• 规范草稿
• 跟踪错误
• ChromeStatus.com 条目
• Blink 组件：Mobile>WebAPKs

谢谢

特别感谢 Microsoft 的 Sunggook Chue 协助我们提供详细信息 负责 Windows 应用的测试，Rayan Kanso 提供了 Chrome 详细信息方面的帮助。