使用 Web 应用清单 ID 属性对 PWA 进行唯一标识

Pete LePage

当用户安装您的 PWA 时，浏览器需要通过某种方式来唯一标识 PWA。但是，直到最近，网络应用清单规范才明确 定义一种唯一标识 PWA 的方法，让浏览器自行决定 从而实现不同的实现方式在某些浏览器中，start_url 而在其他情况下，则会使用清单文件的路径， 无法更新这两个字段中的任何一个。

为了解决此问题，Web 应用中新增了一个可选的 id 属性 清单规范，可让您明确定义用于 PWA。向清单添加 id 属性会移除对 start_url 或清单的位置，并使 以便将来进行更新

id 属性有什么用途？

id 属性表示 PWA 对浏览器的身份。时间 浏览器发现一个清单，该清单的身份不与 已安装 PWA，它会将其视为新的 PWA，即使提供 。但如果它看到包含身份的清单 与已安装的 PWA 匹配，它会将其视为已安装的 PWA。

浏览器支持

在 Chrome 96 中实现了对 id 属性的支持。

如果我的应用没有 id，该怎么办？

您无需执行任何操作， 不要向您的 Web 应用清单添加 id（只要 start_url 和 清单路径会保持不变）。为了让您的 PWA 适应未来变化，您可以添加 id 属性添加到 Web 应用清单中。

如何确定和设置 id？

以最安全、最准确的方式确定 PWA 的 id 查看 Chrome 计算出的值。

  1. 使用 Chrome 96 或更高版本，打开 DevTools 中 Application 面板的 Manifest 窗格。
  2. 将鼠标悬停在应用 ID 属性旁边的 (!) 图标上。通过 仅当在以下位置指定 id 时，系统才会显示 (!) 提示图标 Web 应用清单文件。
  3. 请记下工具提示中显示的 id 值（参见下面的屏幕截图）。
  4. 使用如下所示的 id 值向 Web 应用清单添加 id 属性： 提示。

显示“id”的提示值。

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

如果我没有设置 id，会怎么样？

别担心，不会有任何问题。从 Chrome 96 开始， 如果清单中没有该文件，浏览器将生成 id 基于 Web 应用清单中的 start_url。

通过向 Web 应用清单添加 id， 更改 start_url 和清单路径（当且仅当其 origin 保持不变！）， 因为浏览器会 根据指定的 id（而不是 start_url 或 清单路径。

如何对此进行测试？

如需测试此行为，请按照 具体步骤：

  1. 安装 PWA。
  2. 打开 about://web-app-internals/，然后查看 unhashed_app_id 和 start_url 属性。
  3. 按照id 上述如何确定和设置我的 id。
  4. 使用 chrome://restart 重启浏览器，然后从以下位置启动 PWA about://apps，然后关闭 PWA 以强制刷新清单文件。
  5. 打开 about://web-app-internals/ 并检查 manifest_id 属性， 安装的 PWA，以验证它是否未更改。
  6. 更改 Web 应用清单中的 start_url。
  7. 使用 chrome://restart 重启浏览器，然后从以下位置启动 PWA about://apps，然后关闭 PWA 以强制刷新清单文件。
  8. 打开 about://web-app-internals/ 并检查 start_url 属性， 已安装的 PWA，以验证它是否已按预期更新。

其他资源