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

Pete LePage

当用户安装您的 PWA 时，浏览器需要一种唯一标识 PWA 的方法。不过，直到最近，Web 应用清单规范都没有明确定义用于唯一标识 PWA 的方法，而是由浏览器自行决定，导致实现方式不同。在某些浏览器中，使用的是 start_url，而在其他浏览器中，使用的是清单文件的路径，因此无法更新这两个字段中的任何一个。

为了解决此问题，Web 应用清单规范中新增了一个可选的 id 属性，可让您明确定义用于 PWA 的标识符。将 id 属性添加到清单中可移除对 start_url 或清单位置的依赖项，并允许日后对其进行更新。

id 属性有什么用途？

id 属性表示 PWA 在浏览器中的身份。如果浏览器看到清单的身份与已安装的 PWA 不匹配，则会将其视为新的 PWA，即使它是从与其他 PWA 相同的网址提供的也是如此。但是，如果它看到清单的身份与已安装的 PWA 相符，则会将其视为已安装的 PWA。

浏览器支持

Chrome 96 中引入了对 id 属性的支持。

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

您无需执行任何操作，即使您不向 Web 应用清单添加 id（只要 start_url 和清单路径保持不变），也不会有任何中断。为了让您的 PWA 为未来做好准备，您可以向您的 Web 应用清单添加 id 属性。

如何确定和设置 id？

若要确定 PWA 的 id，最安全且最准确的方法是查看 Chrome 计算的值。

  1. 使用 Chrome 96 或更高版本，在开发者工具中打开 Application 面板的 Manifest 窗格。
  2. 如果在 Web 应用清单文件中未指定 id，系统会在计算的应用 ID 属性下方显示一条备注。
  3. 复制备注中显示的 id 值（请参阅以下屏幕截图）。
  4. 使用备注中显示的 id 值向 Web 应用清单添加 id 属性。

在开发者工具的“Application”面板中计算出的应用 ID。

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

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

别担心，不会破坏任何内容。从 Chrome 96 开始，如果清单中没有 id，浏览器会根据网络应用清单中的 start_url 生成一个 id。

向 Web 应用清单添加 id 后，您就可以更改 start_url 和清单路径（当且仅当其特定来源保持不变时！），因为浏览器将根据指定的 id（而不是 start_url 或清单路径）识别 PWA。

如何测试此功能？

如需测试该行为，请按以下步骤操作：

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

其他资源