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

通过集合保持井井有条 根据您的偏好保存内容并进行分类。

getInstalledRelatedApps() 方法允许您的网站检查您的 iOS/Android/桌面应用或 PWA 是否已安装在用户的设备上。

Pete LePage

什么是 getInstalledRelatedApps() API？

getInstalledRelatedApps() 使您的页面可以检查您的移动或桌面应用，或者在某些情况下，您的渐进式 Web 应用 (PWA) 是否已安装在用户的设备上，并允许您在已安装的情况下自定义用户体验。

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

• 将用户从产品营销页面直接重定向到您的应用中。
• 在另一个应用中集中某些功能（如通知），以防止重复通知。
• 如果您的其他应用已安装，则不推广您的 PWA 的安装。

要使用 getInstalledRelatedApps() API，您需要告诉您的应用关于您的网站的信息，然后告诉您的网站关于您的应用的信息。一旦您定义了两者之间的关系，您就可以检查应用是否已安装。

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

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

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

告诉您的 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 应用的 GooglePlay 应用程序 ID

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

检查您的应用是否已安装

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

试用演示

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

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

告诉您的 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 命名空间。

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

[{
  "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 关于其自身的信息

通过在您的 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 提供。

告诉您的 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，该 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 提交错误。尽可能包含详细信息，提供重现该错误的简单说明，并在 Components 框中输入 Mobile>WebAPKs。Glitch 非常适合分享快速且简单的重现。

表达对 API 的支持

您是否计划使用 getInstalledRelatedApps() API？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。

• 在 WICG Discourse 线程上分享您计划如何使用该 API。
• 发送推文至 @ChromiumDev，使用主题标签 #getInstalledRelatedApps，让我们知道您在哪里以及如何使用它。

实用链接

• getInstalledRelatedApps() API 的公开解释器
• 规范草案
• 跟踪错误
• ChromeStatus.com 条目
• Blink 组件：Mobile>WebAPKs

感谢

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