Service Worker 缓存 CSS 文件后样式不生效怎么办？

Zz子香提问于 2026-02-28 13:42:22 阅读 13

优化

我用 Service Worker 缓存了静态资源，但发现页面加载时有时候 CSS 样式没应用上，刷新一下又好了。是不是缓存策略写错了？

我试过在 install 事件里缓存 CSS，也确认文件路径没错，但偶尔还是会出现无样式的情况。下面是我项目里的一段关键 CSS：

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc;
  margin: 0;
  padding: 20px;
}
.header {
  color: #1e293b;
  font-size: 24px;
}

这种情况该怎么排查？是不是应该用 Cache First 还是 Network First 策略？

网络优化

我来解答赞 4 收藏

反馈

1 条解答

シ玉曼 Lv1

你这大概率是缓存还没准备好就请求了，或者 fetch 事件里没正确处理。最简单的办法是确保 install 时强制等待缓存完成，fetch 时用 Cache First 并处理好匹配失败的情况。直接看代码：

const CACHE_NAME = 'v1';

const ASSETS = ['/style.css', '/app.js'];



self.addEventListener('install', e => {

  e.waitUntil(

    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))

  );

});



self.addEventListener('fetch', e => {

  e.respondWith(

    caches.match(e.request).then(res => res || fetch(e.request))

  );

});

另外检查一下你缓存 CSS 时响应头里的 Content-Type 是不是 text/css，有些服务器返回错了会导致浏览器不认。还有别忘了改缓存版本号，不然旧缓存会坑死你。

2026-02-28 22:05