如何更改 PWA 的图标、快捷方式、颜色和其他元数据
安装 PWA 后,浏览器会使用 Web 应用清单中的信息作为应用名称、应用应使用的图标,以及在应用启动时应打开的网址。但是,如果您需要更新应用快捷方式或尝试新的主题颜色,该怎么办?这些更改何时以及如何在浏览器中反映出来?
在大多数情况下,在更新清单后,更改应该会在 PWA 发布后的一两天内反映出来。
桌面版 Chrome 的更新
启动 PWA 或在浏览器标签页中打开 PWA 时,Chrome 会确定上次检查本地清单是否有更改的时间。如果自上次启动浏览器以来尚未检查清单,或者在过去 24 小时内尚未检查清单,Chrome 将发出清单的网络请求,然后将其与本地副本进行比较。
如果清单中的部分属性发生了更改(请参阅下方列表),Chrome 会将新清单加入队列,并在所有窗口关闭后进行安装。安装后,新清单中除 icons
之外的所有字段都会更新。
哪些属性会触发更新?
name
short_name
display
(见下文)scope
shortcuts
start_url
theme_color
file_handlers
更新 display
字段后会出现什么情况?
如果您将应用的显示模式从 browser
更新为 standalone
,现有用户在更新后应用将不会在窗口中打开。Web 应用有两个显示设置,一个来自清单(由您控制),另一个来自由用户控制的窗口/浏览器标签页设置。始终尊重用户偏好设置。
测试清单更新
chrome://web-app-internals
页面(适用于 Chrome 85 或更高版本)包含设备上安装的所有 PWA 的详细信息,可帮助您了解清单的上次更新时间、更新频率等。
如需手动强制 Chrome 检查更新的清单,您可以使用命令行标志 --disable-manifest-update-throttle
启动 Chrome,也可以重启 Chrome(使用 about://restart
),这会重置计时器,以便 Chrome 在下次启动 PWA 时检查是否有更新后的清单。然后启动 PWA。关闭 PWA 后,应使用新的清单属性对其进行更新。
参考
Chrome(Android 版)的最新动态
启动 PWA 时,Chrome 会确定上次检查本地清单是否有更改的时间。如果在过去 24 小时内未检查该清单,Chrome 将为该清单安排网络请求,然后将其与本地副本进行比较。
如果清单中的部分属性发生了变化(请参阅下方列表),Chrome 会将新清单加入队列,并在 PWA 的所有窗口关闭、设备接通电源并连接到 Wi-Fi 后,从服务器请求更新后的 WebAPK。更新后,系统会使用新清单中的所有字段。
哪些房源会触发更新?
name
short_name
icons
background_color
display
orientation
scope
shortcuts
start_url
theme_color
web_share_target
如果 Chrome 无法从服务器获取更新后的清单,则可能会将检查之间的时间延长至 30 天。
测试清单更新
about://webapks
页面包含有关设备上安装的所有 PWA 的详细信息,并且可以告知您清单的上次更新时间、更新频率等。
如需手动安排清单更新,请替换计时器和本地清单,然后执行以下操作:
- 为设备接通电源,并确保其已连接到 Wi-Fi。
- 使用 Android 任务管理器关闭 PWA,然后使用 Android 设置中的“应用”面板强行停止 PWA。
- 在 Chrome 中,打开
about://webapks
并点击 PWA 的“更新”按钮。“更新状态”应更改为“待处理”。 - 启动 PWA,并验证其是否已正确加载。
- 使用 Android 任务管理器关闭 PWA,然后使用 Android 设置中的“应用”面板强行停止 PWA。
PWA 通常会在几分钟内更新完毕,更新完成后,“更新状态”应变为“成功”
参考
- Android 版 Chrome 的
UpdateReason
枚举