Chrome浏览器独有Service Worker Cache.addAll()网络错误持续复现问题

DevOps 小满

2026-10-5

问题根因

Chrome非隐身模式存在多层级持久化缓存，首次断网触发的Google Fonts请求失败，生成了一个损坏的缓存条目，存储在Chrome底层网络缓存/关联Service Worker的预留缓存区中，普通清理缓存、卸载重装Chrome（默认保留用户配置目录）都无法清除该条目。
Service Worker安装时调用的Cache.addAll()是原子操作，只要列表中任意一个资源请求失败，整个操作就会抛出异常终止SW安装，和你控制台的报错完全匹配。
Chrome隐身模式、其他浏览器的缓存和正式版Chrome非隐身模式的缓存相互隔离，所以不会触发该问题，其他电脑没有这个损坏的缓存条目自然运行正常。

解决方案

清理Chrome底层网络缓存：
1. 地址栏输入chrome://net-internals/#dns，点击「Clear host cache」清除DNS缓存
2. 地址栏输入chrome://net-internals/#sockets，点击「Flush socket pools」清空套接字连接池
3. 地址栏输入chrome://settings/clearBrowserData，时间范围选择「所有时间」，勾选「缓存的图片和文件」「Cookie及其他网站数据」「托管应用数据」，点击清除数据
彻底清理Service Worker残留数据：
地址栏输入chrome://serviceworker-internals/，找到http://localhost:8000对应的Service Worker条目，点击「Unregister」注销，再进入对应SW的调试面板，手动删除「Cache Storage」下所有缓存条目。
若上述操作仍无效，直接删除Chrome用户配置目录：Windows路径为C:\Users\<你的用户名>\AppData\Local\Google\Chrome\User Data，Mac路径为~/Library/Application Support/Google/Chrome，删除前注意备份书签等个人数据。

开发环境优化（永久避免同类问题）：
将Service Worker安装逻辑中的Cache.addAll()原子批量缓存，改为逐个资源缓存并捕获异常，单个资源失败不阻断整个SW安装，参考代码如下：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('dev-cache').then(async cache => {
      const cacheAssets = [/* 你的预缓存资源列表 */]
      for (const asset of cacheAssets) {
        try {
          await cache.add(asset)
        } catch (err) {
          console.warn(`资源${asset}缓存失败，已跳过`, err)
        }
      }
    })
  )
})

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