1. 离线优先应用概述
离线优先（Offline-First）是一种应用架构策略：将离线能力作为一等公民设计，而非退而求其次的降级方案。其核心思想是应用在所有网络条件下——无网络、弱网、高延迟或频繁切换——都能提供可用的、一致的用户体验。
核心理念：不把网络当作假设条件，而是把离线当作默认状态，网络连接仅作为数据同步的优化通道。
1.1 核心价值
| 维度 | 离线优先带来的价值 |
|---|---|
| 用户体验 | 秒开、无白屏、操作不因网络中断而失败 |
| 可靠性 | 弱网/断网下核心功能可用，减少错误感知 |
| 性能 | 本地资源优先，减少网络开销和等待时间 |
| 移动端适配 | 节省流量、降低功耗，适应移动网络不稳定场景 |
| 可访问性 | 偏远地区、地铁、飞机等离线场景仍可使用 |
1.2 适用场景
- 内容消费类：新闻阅读器、电子书、文档查看、知识库（如离线维基）
- 生产力工具：笔记应用、待办清单、项目管理（协同时可后台同步）
- 数据采集/表单：现场巡检、调查问卷、库存盘点（先本地保存，网络恢复后上传）
- 地图/导航：离线地图块、路径规划依赖本地缓存
- 电子商务：商品浏览、购物车本地保存，支付联机确认
- 教育/医疗：离线课程视频、患者档案本地访问
1.3 与传统在线模式对比
| 对比项 | 传统在线模式 | 离线优先模式 |
|---|---|---|
| 网络依赖 | 每次操作必须联网 | 默认不依赖网络，同步可选 |
| 首屏加载 | 等待网络响应 | 本地缓存优先，瞬间加载 |
| 数据可靠性 | 网络中断丢失操作 | 本地存储，后台同步恢复 |
| 用户感知错误 | 断网时显示错误页面 | 平滑过渡，提供离线提示 |
| 开发复杂度 | 较低（无需处理同步） | 较高（需设计冲突解决策略） |
| 一致性保障 | 强一致（实时服务端验证） | 最终一致（本地 + 同步） |
1.4 离线能力分级
不同应用的离线深度不同，业界通常将离线能力划分为以下层级（L0 ~ L4）：
| 级别 | 名称 | 说明 | 典型技术 |
|---|---|---|---|
| L0 | 无离线 | 完全依赖网络，断网即失效 | 传统 AJAX / 全量 SSR |
| L1 | 静态资源缓存 | 仅缓存 HTML/CSS/JS/图片，数据仍然联机请求 | Service Worker + Cache API |
| L2 | 数据缓存 + 骨架屏 | 缓存 API 响应，断网时展示上次数据，辅以骨架屏反馈 | Service Worker + Cache + IndexedDB |
| L3 | 完整离线（本地数据库） | 所有核心数据本地存储，读写完全离线；网络恢复后后台同步 | IndexedDB + 同步引擎（如 PouchDB / RxDB） |
| L4 | 高级离线（协作+冲突解决） | 支持多端离线操作、冲突自动/手动合并、增量同步 | CRDT / OT 算法 + 后台同步 API |
选择建议：大部分内容型应用达到 L2 即可改善体验；需要离线编辑的协作应用需 L3/L4。后续章节将逐级深入实现。
1.5 入门示例：检测在线状态
离线优先应用的第一步是感知网络变化。浏览器提供了 navigator.onLine 属性和 online/offline 事件。
// 检测当前在线状态
const isOnline = navigator.onLine;
console.log('当前网络状态:', isOnline ? '在线' : '离线');
// 监听网络变化
window.addEventListener('online', () => {
console.log('网络已恢复，开始后台同步');
});
window.addEventListener('offline', () => {
console.log('网络断开，切换到离线模式');
});
注意：navigator.onLine 在不同浏览器中行为有细微差异（如 Wi-Fi 连接受限时可能仍返回 true）。建议结合实际的 HTTP 请求检测（例如定期 ping 健康端点）。
1.6 离线优先的最小 PWA 清单
一个离线优先应用通常以 PWA（Progressive Web App）形式交付。以下是最简清单配置：
{
"name": "我的离线应用",
"short_name": "离线App",
"start_url": "/",
"display": "standalone",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"background_color": "#ffffff",
"theme_color": "#3498db"
}
1.7 常见误解与避坑
- 误区：离线优先 = 不加网络检测。事实上需要精细的同步逻辑和状态提示。
- 误区：所有数据都可离线。实际应区分核心数据（必须离线）和辅助数据（按需拉取）。
- 误区：离线优先应用体积会很大。合理使用缓存策略（如 LRU、版本化）可控制存储增长。
1.8 性能与稳定性优化建议
- 分级实现：从 L1 起步，根据业务场景逐步提升到 L3/L4，避免过度设计。
- 缓存过期策略：为静态资源设置合适的 max-age 和 Service Worker 更新逻辑；为数据缓存设置 TTL。
- 同步冲突处理：使用“最后写入胜利”或“操作变换”策略，并保留冲突记录供用户手动合并。
- 渐进增强：确保降级路径安全——如果 Service Worker 注册失败，应用仍能作为普通 Web 应用运行。
- 存储配额监控：使用
navigator.storage.estimate()监控 IndexedDB 和 Cache 使用量，避免超出配额。