使用 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. 将鼠标悬停在应用 ID 属性旁边的 (!) 图标上。仅当 Web 应用清单文件中未指定 id 时，系统才会显示 (!) 提示图标。
  3. 请注意工具提示中显示的 id 值（请参阅下面的屏幕截图）。
  4. 使用提示中显示的 id 值，将 id 属性添加到 Web 应用清单中。

显示“id”值的提示。

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

如果我未设置 id，该怎么办？

别担心，一切都不会中断。从 Chrome 96 开始，如果清单中没有 id，则浏览器会根据 Web 应用清单中的 start_url 生成一个 id。

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

如何测试此功能？

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

  1. 安装 PWA。
  2. 打开 about://web-app-internals/ 并检查已安装的 PWA 的 unhashed_app_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 属性，以验证它是否已按预期更新。

其他资源