移动端 PWA 怎么通过 Service Worker 实现后台离线同步-H5教程-PHP中文网

PWA 后台离线同步依赖 Service Worker 的 Background Sync API，需 HTTPS/localhost 环境、SW 正确注册激活，并在主线程登记 sync 任务，在 SW 中用 event.waitUntil() 处理并配合 IndexedDB 暂存与清理数据。

移动端 pwa 怎么通过 service worker 实现后台离线同步

移动端 PWA 实现后台离线同步，核心是靠 Service Worker 的 Background Sync API —— 它允许页面在无网或用户关闭标签页后，等网络恢复时自动触发数据提交，无需用户手动重试。

确保 Service Worker 已正确注册并启用

后台同步依赖 Service Worker 长期存活，因此必须满足基本前提：

页面通过 HTTPS（生产环境）或 localhost（开发环境）提供服务
Service Worker 脚本（如 sw.js）已成功注册并完成 install/activate 流程
注册时建议调用 self.skipWaiting() 和 clients.claim()，避免旧版本阻塞新逻辑

在主线程中注册同步任务（带容错检测）

用户执行关键操作（如提交表单、保存草稿）时，不直接发请求，而是登记一个后台同步任务：

navigator.serviceWorker.ready.then(registration => {
  // 检查浏览器是否支持 Background Sync
  if (!registration.sync) {
    console.warn('当前浏览器不支持 Background Sync');
    return;
  }
  
  // 注册唯一标识的同步任务（例如 'submit-order'）
  registration.sync.register('submit-order')
    .then(() => console.log('同步任务已登记，等待网络恢复'))
    .catch(err => console.error('登记失败:', err));
});

注意：必须在 navigator.serviceWorker.ready 后调用，否则可能因 SW 尚未就绪而报错。

service-qa-coach

评估聊天、邮件、电话、社交平台私信（DM）或电商平台客服团队的服务质量。适用于团队需要制定 QA 评分卡、故障模式分析、辅导计划、校准检查清单或服务改进简报，但无法访问实时工单系统、CRM 或联络中心系统的情况。

下载

在 Service Worker 中监听并处理 sync 事件

当设备联网且浏览器判定适合执行时（例如前台空闲、电量充足），SW 会收到 sync 事件：

// sw.js
self.addEventListener('sync', event => {
  if (event.tag === 'submit-order') {
    event.waitUntil(
      // 1. 从 IndexedDB 或 Cache 中读取待同步的数据
      readPendingOrders()
        .then(orders => Promise.all(
          orders.map(order => 
            // 2. 发起真实网络请求
            fetch('/api/orders', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(order)
            })
            .then(res => {
              if (res.ok) {
                // 3. 成功后从本地存储中删除该条目
                return deleteOrderFromDB(order.id);
              }
              throw new Error(`HTTP ${res.status}`);
            })
          )
        ))
        .catch(err => console.error('同步失败，将重试:', err))
    );
  }
});

关键点：event.waitUntil() 告诉浏览器“这个任务还没完”，防止 SW 被提前终止；失败不会丢弃任务，系统会在后续条件满足时再次触发。