PWA 的 Background Sync 在 iOS 上为啥不生效？

兄弟，这坑我也踩过，先说结论：你的代码没问题，是 iOS Safari 根本不支持 Background Sync API。

根本原因是 WebKit 团队（也就是 Safari 的内核）出于对电池续航和用户隐私的考虑，一直没有实现这个标准。虽然 Chrome 和 Android 上这玩意儿很好用，但在 iOS 的 Web 环境里，registration.sync.register 这行代码目前就是摆设，它既不会报错，也不会生效，完全被忽略了。

那是不是就没办法了？也不至于，虽然原生的 Background Sync 用不了，但我们可以用一套兼容方案来覆盖 iOS 和 Android。核心思路就是：能原生用原生，不能用就用“网络状态监听 + Service Worker 消息通信”来模拟。

具体怎么做，分两步走。

第一步，在你的主页面代码里做一个特性检测。如果浏览器支持 Background Sync 就用原生的；如果不支持（比如 iOS），就注册一个 online 事件监听器。当网络恢复时，手动通知 Service Worker 去干活。

代码大概这么写：

// 注册 Background Sync 的逻辑封装

function registerBackgroundSync() {

  if ('serviceWorker' in navigator && 'sync' in ServiceWorkerRegistration.prototype) {

    // 情况一：支持 Background Sync（如 Chrome/Android）

    return navigator.serviceWorker.ready.then(registration => {

      return registration.sync.register('sync-tasks').catch(err => {

        console.log('后台同步注册失败，降级处理', err);

        // 这里其实可以加个兜底，防止注册失败导致数据不同步

      });

    });

  } else {

    // 情况二：不支持（如 iOS Safari），启动网络监听模式

    console.log('当前环境不支持 Background Sync，启用网络状态监听');

    window.addEventListener('online', () => {

      console.log('网络已恢复，通知 Service Worker 同步');

      navigator.serviceWorker.ready.then(registration => {

        // 发送消息给 SW，告诉它现在网络好了，赶紧干活

        registration.active.postMessage({ type: 'SYNC_NOW' });

      });

    });

    return Promise.resolve();

  }

}



// 比如用户提交任务时调用

registerBackgroundSync();

第二步，去你的 Service Worker 文件里，把“同步任务”这个逻辑抽离成一个独立的函数。然后既监听 sync 事件（给 Android 用），也监听 message 事件（给 iOS 用）。

Service Worker 的代码改造成这样：

// 具体的同步逻辑，不管是 iOS 还是 Android 最终都走这里

async function syncTasks() {

  // 这里写你的业务逻辑，比如从 IndexedDB 拿数据，发 fetch 请求

  console.log('开始同步待办任务...');

  

  try {

    // 假设我们有个函数获取待同步的数据

    const tasks = await getPendingTasksFromDB(); 

    for (const task of tasks) {

      await fetch('/api/tasks', {

        method: 'POST',

        body: JSON.stringify(task)

      });

    }

    // 同步成功后，清理本地数据

    await clearPendingTasks();

  } catch (error) {

    console.error('同步失败，等待下次重试', error);

    // 如果是原生 Background Sync，SW 会自动重试

    // 如果是 iOS 模拟的，可能需要你自己加个重试标记，这里就不展开了

  }

}



// 监听原生 Background Sync 事件（Chrome/Android）

self.addEventListener('sync', event => {

  if (event.tag === 'sync-tasks') {

    event.waitUntil(syncTasks());

  }

});



// 监听来自主线程的消息（iOS 兼容方案）

self.addEventListener('message', event => {

  if (event.data && event.data.type === 'SYNC_NOW') {

    // 注意：这里不能用 waitUntil，因为 message 事件没有这个参数

    // 直接执行即可，或者用 event.waitUntil 如果浏览器支持（部分新版支持）

    event.waitUntil(syncTasks());

  }

});

这里有个细节要特别注意，也是 iOS 这种方案和 Android 原生方案最大的区别：原生 Background Sync 是真正的“后台”，即使用户关了浏览器，只要网络恢复，系统会唤醒 SW 执行。但 iOS 的 online 事件必须依赖用户打开浏览器或者你的 PWA 还在前台运行时才能触发。如果用户离线关了 App，过一会恢复网络但没打开 App，那数据还是同步不上去。

在目前的 iOS 生态下，这是最稳妥的“无侵入式”方案。至于轮询，千万别用，在 Web 环境里轮询太耗电，而且很容易被系统挂起，体验极差。

总结一下：你的代码没写错，是 iOS 不给权限。用上面这套“双保险”写法，Android 享受真后台同步，iOS 享受“打开即同步”，能解决 99% 的场景。