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

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

优化

我用 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 策略？

网络优化

我来解答赞 9 收藏

反馈

2 条解答

皓阳 Dev Lv1

这问题前端这块挺常见的，就是Service Worker缓存策略没处理好导致的。CSS这种关键资源建议用Network First策略，别用Cache First，不然很容易出现你这种样式失效的情况。

我猜你可能是这么写的：

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

  event.respondWith(

    caches.match(event.request).then(response => {

      return response || fetch(event.request)

    })

  )

})

这种Cache First策略会导致CSS更新时出现版本不一致的问题。

改成这样会稳很多：

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

  if (event.request.url.endsWith('.css')) {

    event.respondWith(

      fetch(event.request).catch(() => caches.match(event.request))

    )

    return

  }

  // 其他资源处理逻辑...

})

另外记得在install事件里不要预缓存CSS，这东西更新太频繁了。调试时可以看下Chrome开发者工具的Application -> Service Worker面板，确认下当前生效的缓存版本。

还有个小技巧，给CSS文件加个版本号或者hash，比如style.v2.css，这样能避免缓存问题。现在都是webpack打包自动处理这事了。

2026-03-07 15:08

シ玉曼 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