Django PWA的serviceworker执行Cache.addAll报Request failed错误如何解决？

错误根因 #

Cache.addAll() 方法要求传入的所有资源路径都能返回 200级别的HTTP响应，只要任意一个请求返回404/301/403等非2xx状态，就会直接抛出该Promise错误。你将参数设为空数组仍报错，大概率是浏览器还在运行之前注册的旧版Service Worker，修改后的代码没有被加载生效。

修复方案 #

方案1：无离线需求的极简修复（推荐）

既然你暂时不需要离线使用功能，可以直接移除预缓存逻辑，将serviceworker.js修改为如下内容即可：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

方案2：保留缓存逻辑的修复

如果后续需要支持离线功能，先修正资源路径配置：

• 检查Django项目urls.py中是否配置了对应/index的路由，注意Django默认开启APPEND_SLASH配置，访问/index会自动301重定向到/index/，跨状态码请求会导致addAll失败
• 将cache.addAll参数中的路径修改为实际可正常访问的路径，比如首页路径为根路径就写'/'，或者补全末尾斜杠：

var staticCacheName = 'djangopwa-v1';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(staticCacheName).then(function(cache) {
      return cache.addAll([
        '/index/', // 适配Django带末尾斜杠的路由规则
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);
  if (requestUrl.origin === location.origin) {
    if ((requestUrl.pathname === '/')) {
      event.respondWith(caches.match('/index/'));
      return;
    }
  }
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

清理旧Service Worker

修改代码后必须手动更新浏览器注册的Service Worker，否则修改不会生效：

• 打开Chrome开发者工具 → 「应用(Application)」标签 → 左侧选择「服务工作线程(Service Workers)」 → 点击「更新」或「取消注册」删除旧worker，刷新页面后会自动注册新版worker
• 可以勾选「重新加载时更新」选项，后续刷新页面会自动同步最新的service worker代码

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