Service Worker的message事件中调用cache.addAll添加缓存失败

错误根源 #

cache.addAll()方法要求传入的所有URL对应的请求都必须返回2xx状态码，只要其中一个请求失败（比如404、500、跨域未授权等），整个缓存操作就会抛出错误。

排查与解决步骤 #

1. 验证目标资源的可用性 #

• 直接在浏览器地址栏访问/image1.jpg和/image2.jpg，确认能正常加载（返回200状态）。
• 打开浏览器开发者工具的Network面板，触发缓存操作时，查看这两个资源的请求状态，排查是否存在404、500等错误。

2. 逐个添加资源并捕获具体错误 #

替换cache.addAll()为循环逐个添加，定位失败的具体资源：
修改serviceWorker.js代码：

self.addEventListener('message', async function (e) {
    console.log(e.data);
    const cache = await caches.open('my_cache_name');
    
    // 遍历URL逐个缓存，单独捕获错误
    for (const url of e.data) {
        try {
            await cache.add(url);
            console.log(`缓存成功: ${url}`);
        } catch (error) {
            console.error(`缓存失败: ${url}`, error);
        }
    }
});

这样能在控制台明确看到哪个URL导致了失败，针对性排查。

3. 处理跨域资源（如果涉及） #

如果要缓存的是跨域图片：

• 确保资源所在服务器配置了Access-Control-Allow-Origin等CORS响应头，允许当前域名访问。
• 若需要自定义请求模式，可使用cache.put()手动构造请求：

  await cache.put(url, await fetch(url, { mode: 'cors' }));
  

4. 确认Service Worker作用域 #

Service Worker的默认作用域是其所在目录及子目录，若你的Service Worker不在根目录，注册时需指定scope参数，确保能覆盖要缓存的资源路径：
修改main.js的注册代码：

navigator.serviceWorker.register('/serviceWorker.js', {
    scope: '/' // 覆盖根目录下所有资源
});

5. 检查运行环境 #

• 生产环境必须使用HTTPS协议（localhost开发环境除外），否则Service Worker无法正常工作，导致请求失败。

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