你有没有过这样的经历？在地铁隧道里刷手机，突然网络断了，心爱的新闻App瞬间变灰——不是加载失败，而是整个页面卡死。这简直是对PWA（渐进式Web应用）承诺的“离线可用”最辛辣的讽刺。PWA的流行让无数开发者兴奋，但数据同步的坑，却让许多项目在离线场景下“翻车”。今天，我将带你彻底拆解一个真正靠谱的方案：用IndexedDB存储数据，Service Workers驱动同步，让PWA不再是“半吊子离线”，而是名副其实的“永不掉线”体验。

一、为什么PWA的“离线”总让人失望？

PWA的核心优势在于通过Service Workers实现缓存策略（如预缓存静态资源），但数据存储才是真正的瓶颈。

• Service Workers能缓存HTML/CSS/JS，但用户输入的动态数据（如笔记、购物车）需要持久化存储。
• 传统方案（如localStorage）容量小、不支持事务，无法应对复杂场景。
• 结果？用户离线时，App能打开，但数据存不下来；在线时，数据又无法自动同步——体验割裂。

关键突破点：让Service Workers成为“数据调度员”，IndexedDB成为“数据仓库”。

二、核心角色：IndexedDB vs. Service Workers

✅ 关键协同逻辑：
当用户离线操作时，Service Worker将数据写入IndexedDB；
当网络恢复时，Service Worker触发同步事件，将数据上传至服务器。

三、实战：手把手实现数据同步闭环

步骤1：注册Service Worker并初始化IndexedDB

// service-worker.js
const DB_NAME = "offline-app-db";
const DB_VERSION = 1;

// 1. 打开IndexedDB（首次注册时自动创建）
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, DB_VERSION);
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains("notes")) {
        db.createObjectStore("notes", { keyPath: "id" });
      }
    };
    request.onsuccess = (event) => resolve(event.target.result);
    request.onerror = (event) => reject(event.target.error);
  });
};

// 2. 注册Service Worker（在主页面）
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker注册成功'))
    .catch(err => console.error('注册失败:', err));
}

步骤2：在Service Worker中拦截请求并同步数据

// service-worker.js (核心逻辑)
self.addEventListener('fetch', (event) => {
  // 离线时，从IndexedDB返回缓存数据
  if (!navigator.onLine) {
    event.respondWith(
      openDB().then(db => {
        const transaction = db.transaction(['notes'], 'readonly');
        const store = transaction.objectStore('notes');
        return store.getAll().then(notes => {
          return new Response(JSON.stringify(notes), {
            headers: { 'Content-Type': 'application/json' }
          });
        });
      })
    );
  }
});

// 3. 网络恢复后触发同步（利用sync事件）
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-notes') {
    event.waitUntil(
      openDB().then(db => {
        const transaction = db.transaction(['notes'], 'readwrite');
        const store = transaction.objectStore('notes');
        const notes = store.getAll(); // 获取所有待同步数据
        
        return notes.then(data => {
          // 模拟上传到服务器（实际用fetch API）
          return fetch('/api/sync', { method: 'POST', body: JSON.stringify(data) })
            .then(() => {
              // 同步成功后清空本地数据
              store.clear();
            });
        });
      })
    );
  }
});

步骤3：在前端触发同步（当网络恢复时）

// 在App主逻辑中
function triggerSync() {
  if ('sync' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.sync.register('sync-notes'); // 触发同步事件
    });
  }
}

// 网络状态变化时自动调用
window.addEventListener('online', triggerSync);

四、为什么这个方案能“封神”？

1. 无缝体验：用户在地铁里写笔记 → 本地保存到IndexedDB → 上了网自动同步，全程无感知。
2. 数据安全：IndexedDB的事务机制确保数据写入原子性（要么全成功，要么全失败）。
3. 性能优化：Service Workers的sync事件在后台触发，避免阻塞主线程。
4. 真实场景：
   • 新闻App：离线浏览已缓存文章，网络恢复后自动更新未读列表。
   • 电商购物车：用户离线添加商品，上线后自动同步至服务器库存。

💡 避坑指南：

• IndexedDB版本升级：每次修改数据库结构（如新增字段），必须更新DB_VERSION，否则onupgradeneeded不会触发。
• 错误处理：在openDB中添加onerror，避免因数据库打开失败导致整个流程崩溃。
• 容量限制：IndexedDB容量通常为50MB+，但需通过indexedDB.webkitGetDatabaseNames()检测（Chrome）。

五、进阶思考：从“能用”到“好用”

你可能已经能跑通这个流程，但真正的PWA高手会关注：

1. 增量同步：不是每次同步全部数据，而是标记“已上传”状态，只同步新增/修改项。
2. 冲突解决：当用户在多设备操作时，如何处理数据冲突？（例如用时间戳或版本号）
3. 工具加持：用Workbox库简化Service Workers开发（内置cacheableResponse和sync模块）。

我的实践建议：先实现基础同步，再用Workbox优化。别一上来就堆砌复杂逻辑——PWA的优雅在于“小步快跑”。

结语：离线不是终点，而是起点

IndexedDB + Service Workers的组合，不是冷冰冰的技术堆砌，而是对用户“网络无感”体验的极致追求。它让PWA从“能离线”进化到“离线更强大”。当你在地铁里流畅地编辑文档，而无需担心网络中断，你就懂了：真正的Web应用，应该像空气一样自然存在。