Chrome中使用Service Worker实现PWA离线模式时CSS无法渲染问题

问题根因 #

你的Service Worker中fetch事件的缓存逻辑存在两处核心错误，导致CSS资源返回的响应体为空，无法被浏览器解析渲染：

1. 未命中缓存分支中，你直接将fetch()返回的响应Promise传入cache.add()，而Response的body是只能被消费一次的可读流，被缓存逻辑消费后，返回给浏览器的响应已经没有可读取的样式内容，所以状态码显示200但没有样式。
2. 你写的try/catch只能捕获同步代码错误，完全无法捕获fetch这类异步操作的异常，错误被静默吞掉也会加大排查难度。

修复后的Service Worker代码 #

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("v1").then((cache) => {
      return cache.addAll([
        // 这里请替换成你实际的静态资源路径，确保CSS文件路径正确填写
        "/index.html",
        "/style.css",
        "/main.js"
      ]);
    })
  );
});

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.open("v1").then((cache) => {
      // 根路径返回首页逻辑
      if (event.request.url === "http://localhost:3000/") {
        return cache.match("http://localhost:3000/index.html");
      }

      return cache.match(event.request).then((cachedResponse) => {
        // 命中缓存直接返回
        if (cachedResponse) {
          console.log("Loading asset from cache.");
          return cachedResponse;
        }

        // 未命中缓存走网络请求
        return fetch(event.request).then((networkResponse) => {
          // 克隆响应：一份存入缓存，一份返回给浏览器
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        }).catch((error) => {
          console.error("资源加载失败：", error);
          // 离线场景下可在此处返回预设的兜底资源，按需调整即可
        });
      });
    })
  );
});

额外检查项 #

• 调试前请先在浏览器开发者工具「应用」面板注销当前已注册的旧Service Worker，清空站点缓存后再重新测试，避免旧缓存逻辑干扰。
• 确认你的CSS文件路径已经正确填写到install事件的cache.addAll列表中，如果是运行时动态加载的CSS，上面的动态缓存逻辑也能正常覆盖。
• 检查服务端返回的CSS响应头Content-Type是否为text/css，MIME类型错误也会导致浏览器拒绝渲染样式。

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