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

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

• platform 必须是 play
• id 是 Android 软件包 ID

{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

专业提示：这是一个数组。这意味着，您可以定义网站与多个 Android 应用之间的已验证关系。

检查您的应用是否已安装

最后，调用异步函数 navigator.getInstalledRelatedApps() 以检查您的 Android 应用是否已安装。

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

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

支持的平台 ：

• 仅限 Windows：Chrome 85 或更高版本、Edge 85 或更高版本

向 Windows 应用告知您的网站

您需要更新 Windows 应用，以使用 URI 处理程序 定义网站与 Windows 应用之间的已验证关系。这样可以验证只有您的网站可以检查您的 Windows 应用是否已安装。

将 Windows.appUriHandler 扩展注册添加到应用的清单文件 AppxManifest.xml 或 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> 属性。

如果您的网站有多个地址，则在 <uap3:AppUriHandler> 内为每个地址添加单独的 <uap3:Host Name=... /> 条目。

然后，创建一个名为 windows-app-web-link 的 JSON 文件（不带 .json 文件扩展名），并提供应用的软件包系列名称。将该文件放在 /.well-known/ 目录或服务器根目录下。

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

专业提示：这是一个数组。这意味着，您可以定义网站与多个 Windows 应用之间的已验证关系。

如需确定软件包系列名称，您可以安装该应用，在 PowerShell 中运行以下命令，然后在列表中找到您的应用：

Get-AppxPackage | Select-Object PackageFamilyName

如需详细了解如何设置 URI 处理程序，请参阅使用应用 URI 处理程序为网站启用应用。

向网站告知您的 Windows 应用

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

• platform 必须是 windows
• id 是应用的软件包系列名称，并在末尾附加了 !App 作为后缀

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

专业提示：这是一个数组。这意味着，您可以定义网站与多个 Windows 应用之间的已验证关系。

检查您的应用是否已安装

最后，调用异步函数 navigator.getInstalledRelatedApps() 以检查您的 Windows 应用是否已安装。

查看此演示。

检查您的渐进式 Web 应用是否已安装（在范围内）

您的 PWA 可以检查自身是否已安装。在这种情况下，发出请求的网页必须与您的 PWA 位于同一网域，并且在您的 PWA 的 范围 内（由 Web 应用清单中的范围定义）。

支持的平台 ：

• 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 的 范围 内调用异步函数 navigator.getInstalledRelatedApps() 以检查 PWA 是否已安装。如果在 PWA 范围外调用 navigator.getInstalledRelatedApps()，它将返回 []。如需了解详情，请参阅下文。

检查您的渐进式 Web 应用是否已安装（在范围外）

您的网站可以检查您的 PWA 是否已安装，即使网页不在您的 PWA 的 范围 内也是如此。例如，从 /landing/ 提供的着陆页可以检查从 /pwa/ 提供的 PWA 是否已安装，或者如果您的着陆页是从 www.example.com 提供的，而您的 PWA 是从 app.example.com 提供的。

支持的平台 ：

• 仅限 Android：Chrome 84 或更高版本

向 PWA 告知您的网站

首先，您需要在提供 PWA 的服务器中添加 Digital Asset Links。这将有助于定义网站与 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 与多个网站之间的已验证关系。

向网站告知您的 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 之间的已验证关系。

检查您的 PWA 是否已安装

最后，调用异步函数 navigator.getInstalledRelatedApps() 以检查您的 PWA 是否已安装。

还有问题吗？

还有问题吗？请查看 StackOverflow 上的 getInstalledRelatedApps 标记，看看是否有人提出过类似的问题。如果没有，请在那里提出您的 问题，并务必使用 progressive-web-apps 标记对其进行标记。我们的团队会经常监控该标记，并尝试回答您的问题。

反馈

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

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

实用链接

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

谢谢

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