PWA中Service Worker注册后CSS样式不生效是怎么回事？

Code°名轩提问于 2026-03-15 10:09:18 阅读 396

移动

我刚在项目里加了Service Worker，本地测试缓存也正常，但上线后发现部分页面的CSS样式没加载出来，页面布局全乱了。我检查了网络面板，CSS文件状态是200，但内容好像不对。

我的样式代码很简单，就这段：

.app-header {
  background: #333;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

是不是Service Worker缓存策略配错了？我用的是stale-while-revalidate，但不确定是不是影响了CSS的更新。

我来解答赞 6 收藏

反馈

1 条解答

爱学习的瑞瑞 Lv1

这个问题很典型，不是缓存策略配置的问题，而是缓存版本没控制好。

CSS文件状态200但内容不对，说明返回的是旧缓存。stale-while-revalidate 本身没问题，但它会先返回缓存内容再异步更新，如果你CSS文件更新了但缓存的key没变，就会一直拿到旧版本。

核心问题在于：你怎么让浏览器知道CSS文件变了？

两个解决办法：

一是给CSS引用加版本标识。在HTML里引用CSS时带个时间戳或hash：

<link rel="stylesheet" href="styles.css?v=20240115">

每次更新CSS时同步改这个版本号，Service Worker缓存的是带参数的URL，所以新请求会绕过旧缓存。

二是在Service Worker里做好缓存版本管理。最简单的方式是维护一个版本号：

const CACHE_VERSION = 'v2';

const CACHE_NAME = app-cache-${CACHE_VERSION};

更新CSS内容时，同时改CACHE_VERSION，这样会创建新缓存，旧缓存自动失效。

你本地测试正常是因为浏览器没有旧缓存，上线后用户设备里已经存了第一版的缓存，stale-while-revalidate 每次都先把这个旧版本返回出来。

建议：生产环境CSS用 cache-first 反而更稳，或者确保HTML本身不被缓存（用 network-first），这样CSS版本变了能及时拿到新的HTML引用。

2026-03-16 17:08