您的应用是否已安装？Get Installed Related Apps API 会告诉您！

Pete LePage

Alexey Rodionov

获取已安装的相关应用 API 可用于获取已安装的相关应用列表以及有关这些应用的详细信息。

借助该 API，您可以检查渐进式 Web 应用 (PWA)、Android 应用或通用 Windows 平台 (UWP) 应用是否已安装在当前设备上，无论是从 PWA 本身还是从相关网页（例如产品营销网站）都可以进行检查。

如果应用已安装，您可以自定义用户体验。

例如：

• 如果您的其他应用已安装，则不会宣传 PWA 的安装。
• 将用户从产品营销网站直接重定向到您的应用。
• 将通知等部分功能集中到另一个应用中，以防止重复通知。

什么是 Get Installed Related Apps API？

调用异步 navigator.getInstalledRelatedApps() 方法会返回一个 promise，该 promise 会解析为一个对象数组，其中包含有关以下应用的详细信息：

• 安装在当前设备上，
• 在 Web 应用清单的 related_applications 字段中定义，
• 与调用 navigator.getInstalledRelatedApps() 方法的网页具有已验证的关系（详情请参阅下文）。

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

调用 console.log(installedRelatedApps) 会返回如下内容：

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

例如，如需检查用户的设备上是否安装了任何相关应用，您可以使用以下单行代码：

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

如果您知道软件包 ID，可以使用以下单行命令获取已安装的相关 Android 应用的版本号：

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

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

检查您的 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>

完成后，在设备上安装更新后的应用，或将其发布到 Google Play 商店或任何其他 Android 应用分发平台。

向您的网站介绍您的 Android 应用

接下来，通过向网页添加 Web 应用清单，告知网站您的 Android 应用。清单必须包含 related_applications 属性，这是一个提供应用详细信息的数组，包括 platform 和 id。

• platform 必须为 play
• id 是 Android 软件包 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>

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

然后，创建一个名为 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 应用清单中定义的 PWA 范围内。

支持的设备：

• Android：Chrome 84 或更高版本
• 桌面设备（Windows、macOS、Linux、ChromeOS）：Chrome 140 或更高版本、Edge 140 或更高版本

让 PWA 了解自身

通过在 PWA 的Web 应用清单中添加 related_applications 条目，让 PWA 了解自身。

• platform 必须为 webapp
• url 是 PWA 的 Web 应用清单的路径（可以是相对路径）
• id 是在 Web 应用清单的 id 字段中声明或由浏览器计算出的Web 应用 ID（桌面设备必需，Android 设备不需要）

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

检查 PWA 是否已安装

最后，从 PWA 的 scope 内调用异步函数 navigator.getInstalledRelatedApps()，以检查 PWA 是否已安装。如果 navigator.getInstalledRelatedApps() 是在 PWA 范围之外调用的，则会返回 []。有关详情，请参见下文。

检查渐进式 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 是否已安装。

还有问题吗？

仍有疑问？查看 StackOverflow 上的 getInstalledRelatedApps 标记，看看是否有人提出过类似问题。如果找不到，请在论坛中提出问题，并务必添加 progressive-web-apps 标记。我们的团队会经常监控该标签，并尽力回答您的问题。

反馈

您是否发现 Chrome 的实现存在 bug？还是实现与规范不同？

• 请访问 https://new.crbug.com 提交 bug。请尽可能详细地说明问题，提供重现 bug 的说明，并在组件框中输入 Mobile>WebAPKs。

实用链接

• Get Installed Related Apps API 的公开讲解
• 规范草稿
• 跟踪 bug
• ChromeStatus.com 条目
• Blink 组件：Mobile>WebAPKs

谢谢

特别感谢 Microsoft 的 Sunggook Chue 帮助我们详细了解了 Windows 应用的测试，以及 Rayan Kanso 帮助我们详细了解了 Chrome。