Chrome 如何处理 Web 应用清单的更新

更改 PWA 的图标、快捷方式、颜色和其他元数据需要哪些条件

Adriana Jara
François Beaufort
François Beaufort
GitHub
Pete LePage

安装 PWA 后，浏览器会使用 Web 应用清单中的信息来确定应用名称、应用应使用的图标以及启动应用时应打开的网址。但如果您需要更新应用快捷方式或尝试新的主题颜色，该怎么办？这些更改何时以及如何反映在浏览器中？

在大多数情况下，在清单更新后，PWA 启动后的一两天内，更改就会生效。

桌面版 Chrome 的更新

当 PWA 在浏览器标签页中启动或打开时，Chrome 会确定上次检查本地清单是否发生更改的时间。如果自浏览器上次启动以来清单尚未经过检查，或者在过去 24 小时内尚未经过检查，Chrome 将针对清单发出网络请求，然后将其与本地副本进行比较。

如果清单中的部分属性发生了更改（请参阅下表），Chrome 会将新清单加入队列，并在所有窗口关闭后安装该清单。 安装后，系统会更新新清单中的所有字段，但 icons 除外。

哪些属性会触发更新？

  • name
  • short_name
  • display（请参见下文）
  • scope
  • shortcuts
  • start_url 注意：对 start_url 的更改需要设置清单 id。了解详情。
  • theme_color
  • file_handlers

更新 display 字段后会发生什么情况？

如果您将应用的显示模式从 browser 更新为 standalone，现有用户在更新后将无法在窗口中打开应用。Web 应用有两项显示设置：一项来自清单（由您控制），另一项是用户控制的窗口和浏览器标签页设置。始终尊重用户偏好设置。

测试清单更新

chrome://web-app-internals 页面（可在 Chrome 85 或更高版本中使用）包含有关设备上安装的所有 PWA 的详细信息，可帮助您了解清单的上次更新时间、更新频率等。

如需手动强制 Chrome 检查更新后的清单，您可以启动 Chrome 并使用命令行标志 --disable-manifest-update-throttle，也可以重启 Chrome（使用 about://restart），这样会重置计时器，以便 Chrome 在下次启动 PWA 时检查更新后的清单。然后启动 PWA。关闭 PWA 后，应使用新的清单属性进行更新。

参考

Android 版 Chrome 的更新

当 PWA 启动时，Chrome 会确定上次检查本地清单是否发生更改的时间。如果清单在过去 24 小时内未经过检查，Chrome 将安排针对清单的网络请求，然后将其与本地副本进行比较。

如果清单中的某些属性发生了变化（请参阅下文列表），Chrome 会将新清单加入队列，并在 PWA 的所有窗口都已关闭、设备已插入电源并连接到 WiFi 后，向服务器请求更新的 WebAPK。更新后，系统会使用新清单中的所有字段。

哪些属性会触发更新？

  • name
  • short_name
  • icons
  • background_color
  • display
  • orientation
  • scope
  • shortcuts
  • start_url
  • theme_color
  • web_share_target

如果 Chrome 无法从服务器获取更新后的清单，可能会将检查间隔时间增加到 30 天。

测试清单更新

about://webapks 页面包含有关设备上安装的所有 PWA 的详细信息，并可告知您清单上次更新的时间、更新频率等。

如需手动安排更新清单，并替换计时器和本地清单，请执行以下操作：

  1. 插上设备，并确保设备已连接到 Wi-Fi。
  2. 使用 Android 任务管理器关闭 PWA，然后使用 Android 设置中的“应用”面板强行停止 PWA。
  3. 在 Chrome 中，打开 about://webapks，然后点击相应 PWA 的“更新”按钮。“更新状态”应更改为“待处理”。
  4. 启动 PWA，并验证其是否已正确加载。
  5. 使用 Android 任务管理器关闭 PWA，然后使用 Android 设置中的“应用”面板强行停止 PWA。

PWA 通常会在几分钟内更新。更新完成后，“更新状态”应更改为“成功”

参考