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

Penny McLachlan
Penny McLachlan

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

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

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

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

之前的离线检测逻辑

验证离线支持已多年是 PWA 可安装性条件的一部分。直到最近,Chrome 才能够通过 Service Worker 模拟请求,因此无法全面检查正确的离线行为。

Service Worker 示意图

这意味着,Chrome 无法验证 fetch 事件处理脚本在离线检查期间是否返回了 HTTP 200 的有效资源。Chrome 只会检查该服务工件是否实际具有 fetch 处理脚本。

更新了离线检测逻辑

Chrome 89 添加了通过服务工件运行模拟离线请求的功能,改进后的离线检测逻辑可以更好地反映应用的实际离线支持情况。

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

这对开发者意味着什么?

虽然目前无需做出任何更改,但我们强烈建议您提供离线体验,因为我们预计未来会使用更新后的逻辑检查有效网页。

您可以自行决定要提供什么样的离线体验。在一个极端,是完全功能的离线体验。这意味着,您需要预缓存所需的所有资源和数据,并在用户重新上线时与您的服务器同步数据。缓存资源还有助于提升核心网页指标,因为这样可以避免每次都从网络下载资源。另一种是自定义离线后备页面

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