css必须在service worker的install阶段用cache.addall()预缓存绝对路径资源，否则首次离线访问必然白屏或样式断裂；因css是渲染阻塞资源，html解析时同步等待其加载，断网且未提前缓存则请求失败导致样式缺失。
CSS 必须在 Service Worker 的 install 阶段预缓存，否则首次离线访问必然白屏或样式断裂。这不是缓存逻辑写错了，而是时机根本没对上——HTML 解析到 <link rel="stylesheet" href="styles.css"> 时会同步阻塞等待，此时若网络已断且 CSS 还没进缓存，请求直接失败，浏览器拿不到任何样式内容。
install 阶段必须用 cache.addAll() 预缓存 CSS
渲染阻塞资源（CSS、JS、HTML）不能靠 fetch 事件里“按需缓存”，那太晚了。必须在 install 阶段一次性把所有关键 CSS 路径塞进缓存：
-
cache.addAll()是原子操作：列表里任一 URL 失败（404、跨域、路径错），整个 install 就失败，Service Worker 不会激活 - 路径必须和 HTML 中
<link href="">的值**完全一致**，且必须是绝对路径：比如 HTML 写的是/css/main.css，缓存列表里就不能写css/main.css或./css/main.css - 构建后路径变了？Webpack/Vite 生成的哈希文件名（如
/css/main.a1b2c3.css）必须填进缓存列表，不能写源码里的main.css - 带查询参数的 URL（如
styles.css?v=2.1）会被当作独立缓存键；后续请求必须含相同参数才能命中，不推荐——改CACHE_NAME更可靠
fetch 事件里要显式响应 CSS 请求
缓存了 CSS 不等于它能被用上。Service Worker 还得在运行时把 CSS 请求真正导向缓存：
- 必须监听
fetch事件，并用event.respondWith()显式接管 - 建议加类型过滤：
if (event.request.destination === 'style')，避免误伤图片、API 等其他请求 - 典型写法：
caches.match(event.request).then(r => r || fetch(event.request))，即“有缓存就用，没有再走网络” -
index.html本身也必须被cache.addAll()缓存，否则连 HTML 都打不开，CSS 根本没机会被请求
开发阶段 CSS 缓存总不生效？先看协议和环境
90% 的“缓存无效”问题卡在启动方式上：
-
file://协议下 Service Worker 完全不工作，这是浏览器强制限制，本地双击 HTML 文件必失败 - vue-cli、Vite 等工具的开发服务器（
npm run serve）默认禁用 Service Worker，防止热更新被缓存劫持 - 正确本地测试姿势：先
npm run build，再用npx serve dist启一个 HTTP 服务，并用 Chrome 无痕窗口访问 - 如果之前注册过旧版 SW，需手动进 DevTools → Application → Service Workers 点击 “Unregister”，再刷新
最容易被忽略的一点：CSS 路径写错时，cache.addAll() 不报错也不提示，只在 DevTools → Application → Cache Storage 里找不到对应文件——这意味着你得主动去那里验证缓存是否真进去了，而不是只看控制台有没有 log。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
