调用cache.addAll()添加上百个URL有哪些可行的替代实现方案？

原生cache.addAll()属于原子操作：只要传入的URL列表里任意一个资源请求失败，整个缓存流程会直接终止，已经请求成功的资源也不会被写入缓存。当URL数量达到上百个时，这种机制容错率极低，同时上百个请求并发发起还会触发浏览器同源并发限制，反而拉长缓存耗时，甚至引发不必要的请求失败。

1. 分片批量缓存 #

将上百个URL拆分为多个小批次（比如每批5~10个资源），逐批次执行cache.addAll()，单批次失败后可单独重试，不会导致全局缓存失败，也能控制并发请求数量避免触发浏览器限制。
示例代码：

// 分片工具函数
function chunkArray(arr, size) {
  const chunks = []
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size))
  }
  return chunks
}

this.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(async cache => {
      const allUrls = [/* 你的上百个URL列表 */]
      const chunks = chunkArray(allUrls, 8) // 每批8个资源
      // 逐批次缓存
      for (const chunk of chunks) {
        try {
          await cache.addAll(chunk)
        } catch (e) {
          // 单批次失败可记录日志，后续触发重试逻辑
          console.warn('批次缓存失败，失败资源列表：', chunk, e)
        }
      }
    })
  )
})

2. 单资源容错缓存 #

不使用批量的cache.addAll()，改为循环调用cache.add()逐个缓存资源，每个资源的请求错误单独捕获，不会影响其他资源的缓存，适合对缓存完整性要求不高、允许个别非核心资源缓存失败的场景。
示例代码：

this.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(async cache => {
      const allUrls = [/* 你的上百个URL列表 */]
      const failUrls = []
      for (const url of allUrls) {
        try {
          await cache.add(url)
        } catch (e) {
          failUrls.push(url)
        }
      }
      // 可将失败的URL列表存入indexedDB，后续空闲时重试缓存
      if (failUrls.length) {
        console.warn('以下资源缓存失败，将后续重试：', failUrls)
      }
    })
  )
})

3. 优先级分层缓存 #

上百个URL中通常只有小部分是首屏必须的核心资源，其余都是非核心的次级资源。可以将资源按优先级拆分：

• 核心资源：install阶段优先缓存，保证首屏离线可用性
• 非核心资源：等Service Worker激活、页面加载完成后，在后台空闲时段再渐进式缓存，不阻塞install流程，也不会占用页面加载的网络带宽。
  示例代码：

// 核心资源列表，首屏必须，install阶段缓存
const coreUrls = ['/', '/index.html', '/static/css/main.chunk.css', '/bootstrap.min.css']
// 非核心资源列表，后续后台缓存
const lazyUrls = [/* 其余上百个非核心URL */]

this.addEventListener('install', event => {
  // 只缓存核心资源，加快install速度
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll(coreUrls))
  )
})

this.addEventListener('activate', event => {
  event.waitUntil(
    // 激活后异步缓存非核心资源，不阻塞主线程
    caches.open('v1').then(async cache => {
      // 用requestIdleCallback在浏览器空闲时执行
      self.requestIdleCallback(async () => {
        for (const url of lazyUrls) {
          try {
            await cache.add(url)
          } catch (e) {/* 忽略错误，后续重试 */}
        }
      })
    })
  )
})

4. 构建工具自动生成缓存清单 #

如果上百个URL是项目构建生成的静态资源，不要手动维护列表，用前端构建工具的PWA插件自动生成缓存清单：

• Webpack生态可以用workbox-webpack-plugin，自动扫描构建产物生成预缓存列表，还自带哈希戳校验避免缓存旧资源
• Vite生态可以用vite-plugin-pwa，同样支持自动生成预缓存配置，内置了分片、容错等优化逻辑，无需手动写底层缓存代码。

内容的提问来源于stack exchange，提问作者ASIF KAIF