一种更优越的 Web 应用更新方式

Dan Murphy
Dan Murphy
Dibyajyoti Pal
Dibyajyoti Pal

发布时间:2026 年 1 月 21 日

从 Chrome 144 开始,具有Web 应用清单的可安装 Web 应用的更新流程已得到简化,使其更具确定性、可预测性和高效性。本文介绍了当前的方法以及我们为改进该方法而做出的更改。

之前的做法(Chrome 144 之前)

在 Chrome 144 之前,Web 应用缺少可主动触发更新的特定事件。相反,当开发者修改应用清单或其关联的图标时,可能会发生更新。当用户代理使用清单链接检索清单时,更新过程开始。这通常发生在用户访问网站或启动应用(与该清单相关联)时。为了确定是否需要更新,系统会将当前清单和图标与之前记录的状态进行比较。此过程需要大量资源,因为它始终需要从网络下载图标才能进行位图比较。

为了缓解图标下载造成的服务器压力,Chrome 实施了节流机制,将这些检查限制为每个应用每天一次,但总带宽消耗仍然很高。此外,将检查限制为每天一次会导致开发和测试期间出现不一致的情况,同时也会妨碍开发者为尚未收到更新的用户提供可靠的解决方案。

采用这种方法时,开发者在实现对安全性有影响的更改(例如更新应用名称或图标,通常称为应用身份更改)时,必须应对各种复杂情况。由于 Web 应用缺少像 Google Play 这样的中央机构来审核更新,因此必须向用户清楚地展示这些修改,以供用户确认。不过,确定提示用户进行这些更改的最合适时间仍然是一项挑战。

更新对话框的过往迭代版本也经常会造成混淆,因为它们会声称图标已更改,但这些图标在用户看来却完全相同。此问题源于依赖直接像素比较,而这种比较往往会标记出微不足道的差异。虽然有些差异是开发者有意调整造成的,但许多差异是由 CDN 动态重新编码图片造成的。这种频繁过度触发确认对话框的行为最终导致 Chrome 91 中停用了图标更新。

为了解决 Chrome Android 版上的这一问题,我们几年前引入了视觉差异阈值。这样可确保仅在图标发生重大变化时才请求用户确认。此改进使得 Android 上重新支持了图标更新,但桌面版 Chrome 上的相应功能仍处于停用状态。

一个显示图标更改的提醒,以及一条警告用户的消息,其中包含用于确认更改或卸载应用的按钮。
桌面设备(未发布的 Chrome 91 及更高版本)
一则移动设备提醒,显示了图标的更改,以及一条警告用户的消息,其中包含用于确认更改或卸载应用的按钮。
Android(当前)

对 Web 应用更新所做的更改的限制和目标

以下目标指导了新更新流程的开发:

  • 维护用户预期:由于应用的身份与来源密切相关,因此在未获得用户明确批准的情况下,不得更改应用的名称和图标。
  • 确保功能一致性:应用应尽可能保持最新状态,以确保所有用户都能获得一致的功能。
  • 提供可预测的用户体验和对话框:开发者应能够轻松预测用户何时会遇到有关应用名称或图标更新的界面提示。
  • 优化网络使用情况:更新机制应尽量减少不必要的数据流量。

Chrome 144 中的变化

名称和图标更新现已成为可选操作

过去,用户会遇到一个干扰性对话框,要求他们卸载应用或立即接受图标和名称更改。此功能已替换为更便于用户使用的建议,可通过展开的三点状菜单访问。选择此选项后,用户现在可以选择完全忽略这些身份更改(如果他们愿意)。

虽然大多数清单更新会立即应用,但应用图标和名称(被视为对安全性敏感的成员)会单独存储。这样,用户就可以在方便时查看并应用这些特定更改。

显示“查看应用更新”选项的菜单。

点击查看应用更新会显示修订后的对话框。标题会根据更新的元素而变化。

桌面版对话框,要求用户查看图标和名称更新。

如果图标字段没有变化,则不会下载图标

如果清单中的 icons 字段与上次应用的版本保持不变,则现在认为相应图标未发生变化。根据这一新逻辑,Chrome 会避免下载图标以进行视觉比较,从而有效地将图标网址视为 Cache-Control:immutable。为了触发图标更新,开发者现在需要修改元数据或图标网址

移除了更新限制

由于 Chrome 不再每次遇到已安装应用的清单时都下载图标,因此之前限制更新检查频率为每天一次的限制已取消。现在,开发者可以放心地让所有非安全敏感型成员立即进行更新。

处理各个平台上的细微图标变体

为了改善用户体验,Chrome 现在会自动应用像素级比较差异小于 10% 的图标更新。这样可确保细微的变化(例如由 CDN 重新编码引起的变化)不会触发令人困惑的更新对话框。

此限额每天仅限一次,以防止潜在的滥用行为。如果在该时间范围内发生进一步的更改,则该图标会被视为标准更新,系统会提示用户确认更改。

图标和名称更新示例

{
  "name": "Example App",
  "short_name": "App",
  "id": "https://www.example-app.com/",
  "start_url": "https://www.example-app.com/index.html",
  "scope": "https://www.example-app.com/",
  "icons": [
    {
      "src": "https://www.example-app.com/img/app.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],

  ... other attributes omitted ...
}

更改图标网址可确保用户看到用于更改图标的更新对话框。

{
  "name": "Example App",
  "short_name": "App",
  "id": "https://www.example-app.com/",
  "start_url": "https://www.example-app.com/index.html",
  "scope": "https://www.example-app.com/",
  "icons": [
    {
      "src": "https://www.example-app.com/img/app-NEW-URL.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],

  ... other attributes omitted ...
}