离线优先设计将 Web 应用程序从依赖网络转变为具有弹性。
无论网络条件如何，离线优先的渐进式 Web 应用程序都能可靠运行。据 Google 称，到 2025 年，40% 的移动用户每天都会在某些时候遇到连接不良或无连接的情况。离线优先设计可改善用户体验，提高连接间隙期间的参与度，并展示可建立用户信任的可靠性。根据 Google 研究，与离线的应用程序相比，具有强大离线支持的 PWA 的会话持续时间高出 40%，重复访问率高出 30%。
在 x13apps，我们构建了随时随地工作的 PWA。这是我们的离线优先实施指南。
Service Worker 和缓存策略
Service Worker 是离线 PWA 功能的基础。它们拦截网络请求并在网络不可用时提供缓存的响应。为每种资源类型选择正确的缓存策略。缓存优先（缓存回退到网络）：首先从缓存提供服务，如果没有缓存则回退到网络。非常适合：应用程序外壳（HTML、CSS、JS）、静态资产和很少更改的资源。网络优先（网络回退到缓存）：首先尝试网络，如果网络失败则提供缓存。适合： API 响应应该是最新的，但可以回退到过时的数据。
实施多个缓存层。预缓存：在 Service Worker 安装期间缓存关键资源。这可确保应用程序 shell 在重复访问时立即加载。运行时缓存：根据请求缓存动态资源。这将通过正常的应用程序使用逐步构建离线缓存。 Stale-While-Revalidate：立即提供缓存内容，同时在后台获取新内容以供下次访问。这提供了即时加载时间，同时保持内容最新。使用 Workbox（Google 库）以最少的配置进行生产就绪缓存。
离线数据管理
IndexedDB 为结构化数据提供客户端存储。在本地存储用户生成的内容、API 响应和应用程序状态。使用Background Sync API 实现数据同步。离线时对用户操作进行排队，并在连接恢复时对其进行处理：表单提交、内容更新、数据修改。向用户显示同步状态：指示数据何时等待上传、同步正在进行以及同步完成。这种透明度让用户相信他们的数据不会丢失。
冲突解决对于离线数据至关重要。对于简单的应用程序使用最后写入获胜策略。为多个用户可以离线编辑相同数据的协作应用程序实施操作转换或 CRDT（无冲突复制数据类型）。在实施离线支持之前选择冲突解决策略。事后添加冲突解决方案比从一开始就进行设计要复杂得多。
离线状态的用户体验
清晰传达连接状态。当网络不可用时显示不显眼的离线指示器。显示缓存的内容，并用视觉指示器表明它可能不是最新的。提供离线可用的内容过滤：向用户显示哪些内容可以离线访问以及哪些内容需要连接。实施渐进式加载：立即显示缓存的内容，并在网络可用时替换为新内容。这创造了一种掩盖连接转换的无缝体验。
系统地测试离线行为。使用 Chrome DevTools 模拟各种网络条件：离线、慢速 3G、快速 3G、4G 和 Lie-Fi（间歇性连接）。离线测试完整的用户旅程：页面之间的导航、表单提交和排队、使用陈旧缓存的数据显示以及重新连接行为。在启用飞行模式的实际设备上进行测试。模拟器测试可捕获 80% 的问题；设备测试捕获剩余的 20%。在 x13apps，我们构建的 PWA 可以在任何网络条件下提供可靠的体验。欲了解更多信息，请阅读我们的PWA 与原生应用比较指南。