用途
本技能用于解决网站在离线状态下的用户体验问题。当用户断网并尝试导航到某个页面时，浏览器默认会显示“无网络连接”错误页，这一页面既令人困惑，又完全脱离品牌形象。通过提供自定义的离线回退页面，可以维持用户体验、增强信任感，并展示缓存内容或有用操作，例如让用户继续阅读已缓存的文章，或将表单提交排队以便稍后处理。
主要能力
- 创建一个最小化的 /offline HTML 页面，该页面无需任何网络请求即可工作。
- 在 Service Worker 的 install 事件中预缓存离线页面。
- 拦截失败的导航请求，改为返回离线页面。
- 在离线页面中包含有用的指引，让用户知道离线时可以做什么。
使用方式
该技能以检查清单规则的形式提供，包含以下环节：
- 检查：确认当网络断开且导航请求无法完成时，网站是否显示自定义的离线回退页面。
- 修复：创建一个自包含的 /offline 页面，并配置 Service Worker 预缓存它，并在导航请求失败时返回它。
- 解释：说明 Service Worker 如何拦截失败的网络请求并向用户返回缓存的离线回退页面。
- 代码审查：审查 Service Worker 的 fetch 处理器和离线页面标记。验证离线页面在安装时已预缓存、不依赖外部资源，并且回退仅用于导航请求（而非子资源）。
完整的实现细节、代码示例和针对特定框架的指导，请参见 references/rule.md。
规则页面：https://frontendchecklist.io/rules/performance/offline-fallback
适用场景
- 为网站添加 PWA（渐进式 Web 应用）能力时。
- 实现或改进 Service Worker 时。
- 希望改善网络连接不可靠用户的体验时。
限制
资料中未提供关于具体框架实现、代码示例或兼容性要求的更多细节，这些内容需参考 references/rule.md 和规则页面。