借助 getInstalledRelatedApps() 方法，您的网站可以检查您的 iOS/Android/桌面应用或 PWA 是否已安装在用户的设备上。
什么是 getinstalledRelatedApps() API？
getInstalledRelatedApps() 确定是否已安装其 Android 应用。
借助 getInstalledRelatedApps()，您的网页可以检查您的移动应用或桌面应用（或者在某些情况下，用户设备上是否已安装渐进式 Web 应用 (PWA)），并让您能够自定义用户体验（若已安装）。
例如，如果您的应用之前已经安装：
- 将用户从产品营销页面直接重定向至您的应用。
- 将一些功能（例如通知）集中到另一个应用中，以防止显示重复的通知。
- 如果您已安装其他应用，则不促使用户安装您的 PWA。
如需使用 getInstalledRelatedApps() API，您需要向应用介绍网站，然后向网站提供应用。在定义了两者之间的关系后，您就可以检查是否已安装应用。
您可以查看的受支持应用类型
| 应用类型 | 可从以下日期开始选择 |
|---|---|
| Android 应用 |
仅限 Android Chrome 80 或更高版本 |
| Windows (UWP) 应用 |
仅限 Windows Chrome 85 或更高版本 Edge 85 或更高版本 |
|
渐进式 Web 应用 安装在同一范围或不同范围中。 |
仅限 Android Chrome 84 或更高版本 |
检查您的 Android 应用是否已安装
您的网站可以检查您的 Android 应用是否已安装。
Android：Chrome 80 或更高版本
向 Android 应用介绍您的网站
首先，您需要更新 Android 应用，以使用 Digital Asset Links 系统定义您的网站与 Android 应用之间的关系。这样可以确保只有您的网站可以检查您的 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 应用
接下来，通过向网页添加 Web 应用清单，向您的网站介绍您的 Android 应用。该清单必须包含 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：Chrome 85 或更高版本、Edge 85 或更高版本
向 Windows 应用介绍网站
您需要更新 Windows 应用，以使用 URI 处理程序定义您的网站与 Windows 应用之间的关系。这样可以确保只有您的网站可以检查您的 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>
请注意，您可能需要向 <Package> 属性添加 uap3 命名空间。
然后，创建一个名为 windows-app-web-link 的 JSON 文件（不带 .json 文件扩展名），并提供应用的软件包系列名称。请将该文件放在服务器根目录或 /.well-known/ 目录中。您可以在应用清单设计器的“打包”部分找到软件包系列名称。
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
如需了解如何设置 URI 处理程序的完整详情，请参阅为使用应用 URI 处理程序的网站启用应用。
向网站介绍您的 Windows 应用
接下来，通过向网页添加 Web 应用清单，向您的网站介绍您的 Windows 应用。该清单必须包含 related_applications 属性，这是一个提供应用详细信息（包括 platform 和 id）的数组。
- “
platform”必须为windows id是应用的软件包系列名称，后跟Package.appxmanifest文件中的<Application>Id值。
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
检查您的应用是否已安装
最后，调用 navigator.getInstalledRelatedApps() 以检查是否已安装 Windows 应用。
检查您的渐进式 Web 应用是否已安装（在范围内）
您的 PWA 可以检查其是否已安装。在这种情况下，发出请求的网页必须位于同一网域内，并且位于 PWA 的范围内（根据 Web 应用清单中的范围定义）。
Android：Chrome 84 或更高版本
告知 PWA 本身
通过在 PWA Web 应用清单中添加 related_applications 条目来告知 PWA 本身。
- “
platform”必须为webapp url是 PWA 的 Web 应用清单的完整路径
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
检查您的 PWA 是否已安装
最后，从 PWA 的范围内调用 navigator.getInstalledRelatedApps() 以检查是否已安装它。如果在 PWA 范围之外调用 getInstalledRelatedApps()，则会返回 false。有关详情，请参见下文。
试用演示
检查您的渐进式 Web 应用是否已安装（不在范围内）
网站可以检查您的 PWA 是否已安装，即使该网页不在 PWA 的范围内。例如，通过 /landing/ 提供的着陆页可以检查是否安装了通过 /pwa/ 提供的 PWA，或者您的着陆页是否通过 www.example.com 提供，而您的 PWA 是通过 app.example.com 提供的。
Android：Chrome 84 或更高版本
向 PWA 介绍您的网站
首先，您需要将数字资产链接添加到提供 PWA 的服务器。这有助于定义您的网站与 PWA 之间的关系，并确保只有您的网站可以检查您的 PWA 是否已安装。
将 assetlinks.json 文件添加到 PWA 所在的网域的 /.well-known/ 目录中，例如 app.example.com。在 site 属性中，提供将执行检查的 Web 应用清单（而不是 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
接下来，通过向网页添加 Web 应用清单，向您的网站介绍您的 PWA 应用。清单必须包含 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。请提供尽可能详细的信息，提供重现 bug 的简单说明，并在 Components 框中输入
Mobile>WebAPKs。Glitch 非常适合快速轻松地分享重现的视频。
显示对该 API 的支持
您打算使用 getInstalledRelatedApps() API 吗？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。
- 请在 WICG Discourse 会话中说明您打算如何使用此 API。
- 请使用 # 标签
#getInstalledRelatedApps向 @ChromiumDev 发送一条推文，并告诉我们您使用该产品的位置和方式。
实用链接
此致
特别感谢 Microsoft 的 Sunggook Chue 帮助测试 Windows 应用的详细信息，以及 Rayan Kanso 提供有关 Chrome 详细信息的帮助。