Service Worker需在install或fetch阶段主动拦截CSS请求并存入Cache API，用event.request.destination==='style'精准识别，预缓存关键CSS，运行时缓存动态CSS，注意响应状态码、MIME类型及缓存版本管理。
Service Worker里怎么拦截CSS请求并存进Cache API
能拦截，但得在 install 或 fetch 阶段主动匹配 .css 资源，不能靠默认行为。浏览器不会自动把link标签加载的CSS丢进缓存——你得自己写逻辑抓它。
常见错误是只监听 fetch 事件却没加判断条件，结果把所有请求都塞进缓存，包括API、图片甚至重定向响应，最后缓存膨胀或返回错类型内容。
- 用
event.request.destination === 'style'精准识别CSS请求（比单纯看URL后缀更可靠） - 优先在
install阶段预缓存已知关键CSS（比如main.css），避免首屏闪动 - 在
fetch中对动态加载的CSS（如组件级样式）做运行时缓存，但要加cache.addAll()或cache.put()显式存入 - 别忘了检查响应状态码：
response.status === 200，否则404或500也会被缓存
Cache API存CSS文件要注意哪些格式和响应头
CSS必须以 text/css MIME 类型返回，且响应体是纯文本；如果服务端返回了 Content-Encoding: gzip，Cache API会原样存压缩体，但后续读取时浏览器仍能正确解压渲染——这点不用手动处理。
真正容易踩坑的是 Cache-Control 和 ETag：Service Worker里的缓存和HTTP缓存是两套机制，但如果你在 fetch 前直接用了 fetch(url, { cache: 'force-cache' })，就可能绕过你的自定义逻辑，导致缓存未更新。
立即学习“前端免费学习笔记（深入）”；
- 存之前建议克隆响应：
cache.put(req, response.clone())，避免因流已被读取而失败 - 不要依赖
response.headers.get('Content-Type')判断是否为CSS，有些CDN会省略或写成text/plain，还是以request.destination为准 - 若CSS里有
@import，那些子请求不会被当前SW脚本自动捕获——每个@import是独立的fetch，需同样规则拦截
CSS缓存失效后如何强制更新用户端的旧样式
没有“一键刷新所有用户CSS缓存”的办法。Service Worker本身升级不等于缓存自动清空，旧CSS仍留在Cache Storage里，除非你显式调用 cache.delete() 或版本化缓存名。
最稳妥的做法是每次发布新样式时，把缓存名从 styles-v1 改成 styles-v2，并在 activate 阶段清理旧缓存：
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys
.filter(key => key.startsWith('styles-') && key !== 'styles-v2')
.map(key => caches.delete(key))
)
)
);
});
- 别在
install阶段删旧缓存——此时新SW还没激活，可能中断正在用旧样式的页面 - 如果用Webpack/Vite，可在构建时把CSS文件名哈希进路径（如
main.a1b2c3.css），这样URL一变，SW自然走新缓存逻辑，无需手动管理版本 - 开发时用
caches.open('styles-v1').then(c => c.keys().then(console.log))手动查缓存内容，比猜靠谱
Chrome DevTools里怎么看CSS到底有没有被SW缓存命中
打开Application → Cache Storage，展开对应缓存名，能看到所有已存资源，包括CSS文件条目；但光看这里不够——得确认实际网络请求是否真的走了缓存。
真正关键的线索在Network面板：找到CSS请求，看Size列。如果是 from ServiceWorker 或 from CacheStorage，说明命中；如果显示具体字节数（如 12 KB）且Status是 200，那大概率是重新请求的，没走缓存。
- 勾选DevTools右上角的 “Offline” 或 “Slow 3G” 并刷新页面，能快速验证CSS是否真被离线可用
- 如果看到CSS请求显示
failed但控制台没报错，可能是SW里fetch()没加catch，静默失败了——务必给 fetch 加错误兜底 - 缓存名称区分大小写，
STYLES-V1和styles-v1是两个不同缓存，调试时注意拼写一致
