如何在vite-pwa插件中配置workbox-background-sync批量重放请求？

可以实现批量重放后台同步请求 #

默认情况下，Workbox的Background Sync确实是逐个处理队列中的失败请求，但你可以通过自定义同步处理器（Sync Handler）来实现批量重放。以下是具体实现方式：

1. 自定义Workbox同步逻辑 #

在你的Vite PWA配置中，通过workbox选项注入自定义的Service Worker代码，覆盖默认的同步处理行为：

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: { /* 你的manifest配置 */ },
      workbox: {
        backgroundSync: {
          name: 'bg-sync',
        },
        // 注入自定义代码到生成的Service Worker中
        additionalCode: `
          self.addEventListener('sync', async (event) => {
            if (event.tag === 'bg-sync') {
              event.waitUntil(handleBatchSync());
            }
          });

          async function handleBatchSync() {
            // 打开Workbox的Background Sync存储
            const db = await openDB('workbox-background-sync', 1);
            const store = db.transaction('requests', 'readwrite').objectStore('requests');
            
            // 获取队列中所有待处理的请求
            const allRequests = await store.getAll();
            
            if (allRequests.length === 0) return;

            try {
              // 如果后端支持批量接口，把请求数据打包发送
              const batchPayload = allRequests.map(req => ({
                url: req.url,
                method: req.method,
                body: req.body,
                headers: req.headers
              }));

              await fetch('/api/batch-sync', {
                method: 'POST',
                body: JSON.stringify(batchPayload),
                headers: {
                  'Content-Type': 'application/json'
                }
              });

              // 批量删除已成功处理的请求
              await store.clear();
            } catch (err) {
              // 批量请求失败，保留队列等待下次同步
              throw err;
            }
          }
        `
      }
    })
  ]
}

2. 前端并发处理替代方案（适配无批量接口的后端） #

如果后端不支持批量接口，你可以通过前端并发请求优化处理效率（并行发送而非逐个等待）：

async function handleBatchSync() {
  const db = await openDB('workbox-background-sync', 1);
  const store = db.transaction('requests', 'readwrite').objectStore('requests');
  const allRequests = await store.getAll();
  
  if (allRequests.length === 0) return;

  try {
    // 控制并发数，避免触发浏览器请求限制
    const concurrentLimit = 6;
    let index = 0;
    while (index < allRequests.length) {
      const batch = allRequests.slice(index, index + concurrentLimit);
      await Promise.all(batch.map(async (req) => {
        await fetch(req.url, {
          method: req.method,
          body: req.body,
          headers: req.headers,
          credentials: 'include'
        });
        await store.delete(req.id);
      }));
      index += concurrentLimit;
    }
  } catch (err) {
    // 存在失败请求时，抛出错误触发下次同步重试
    throw err;
  }
}

关键注意事项 #

• 自定义代码需遵循Service Worker的同源策略和权限限制
• 若批量请求存在部分失败，需根据后端返回结果筛选失败请求重新存入队列
• 并发请求数建议控制在6-8以内，避免触发浏览器的请求并发限制

内容的提问来源于stack exchange，提问作者Geetika Paul