改进渐进式 Web 应用离线支持检测

Penny McLachlan
Penny McLachlan

渐进式 Web 应用 (PWA) 是一种模式,用于使用 Web 技术为移动设备和桌面设备构建可安装的现代应用。

构建现代 Web 体验(包括 PWA)的标准之一是,即使设备处于离线状态,应用也必须能够继续运行。也就是说,如果用户在设备上失去网络访问权限,就不会看到 Chrome 恐龙屏幕!

所有 PWA 标准的目标都是帮助确保用户在浏览网页时获得可与应用相媲美的高质量体验。Chrome 会先根据 PWA 标准执行检查,然后再为 PWA 启用安装功能。

只有满足所有核心 Progressive Web 应用可安装性条件(包括支持离线模式)的应用才能从 Chrome 安装到设备。

之前的离线检测逻辑

验证离线支持已纳入 PWA 可安装性标准多年。在最近之前,Chrome 无法通过 Service Worker 模拟请求,因此无法全面检查正确的离线行为。

Service Worker 示意图

这意味着,在离线检查期间,Chrome 无法验证 fetch 事件处理程序是否返回了 HTTP 200 的有效资源。 Chrome 仅检查了 Service Worker 是否实际具有 fetch 处理程序。

更新了离线检测逻辑

Chrome 89 新增了通过服务工作线程运行模拟离线请求的功能,从而使改进的离线检测逻辑能够更好地反映应用的实际离线支持情况。

我们原本计划使用这项新功能来确保 PWA 在离线时提供有效的网页,但现在已搁置这些计划。如果网页具有包含 fetch 事件处理程序的服务工作线程,则可安装性检查将继续通过。

这对开发者意味着什么?

虽然目前无需进行任何更改,但我们强烈建议您提供离线体验,因为我们预计在未来某个时间点会使用更新后的逻辑来检查网页是否有效。

您可以自行决定要提供什么样的离线体验。 在频谱的一端是功能齐全的离线体验。这意味着预缓存所需的所有资源和数据,并在用户再次上线时与服务器同步数据。缓存资源还有助于改善核心网页指标,因为这样一来,每次都不需要从网络下载资源。另一方面,您还可以使用自定义离线回退页面

在 Chrome 90 左右,开发者工具的问题标签页下显示的警告将移除。