必须在install阶段预缓存css，否则首次离线访问时样式表加载中断导致白屏或布局错乱；需确保路径与html中link标签完全一致、使用带版本号的缓存名并每次发版后验证css是否真实存入。
因为不缓存 CSS，PWA 就无法真正离线可用——用户首次访问后刷新或断网时，styles.css 会 404，页面样式彻底丢失，只剩裸 HTML。
Service Worker 不缓存 CSS 的典型错误现象
你可能已经注册了 Service Worker、也缓存了 index.html 和 app.js，但断网后页面文字堆叠、按钮无样式、布局错乱。打开 DevTools → Application → Cache Storage，检查对应缓存（如 shell-v1），大概率发现 styles.css 根本不在里面。这不是浏览器“忘了加载”，而是你在 install 阶段压根没把它放进 cache.addAll() 列表。
为什么必须在 install 阶段预缓存，而不是 fetch 时按需缓存？
关键在于首次离线加载的原子性：HTML 加载时会同步解析并阻塞渲染，直到 link rel="stylesheet" 指向的 CSS 下载完成。如果该请求被 fetch 事件拦截，而此时缓存里没有它，又无法联网，fetch(event.request) 就会失败，最终返回空响应或抛异常，样式表加载中断。
-
install阶段缓存是“预置保障”：确保核心样式在 Service Worker 激活前就位 -
fetch阶段缓存是“兜底补充”：适合图片、字体等非阻塞资源，不适合 CSS - 若只依赖
fetch缓存，首次离线访问必白屏或样式断裂
缓存 CSS 时容易忽略的三个细节
即使你写了 cache.addAll(['styles.css'])，也可能因路径、版本或更新逻辑出问题：
- 路径必须与 HTML 中
<link href="...">的实际请求路径完全一致（比如是/css/styles.css还是./styles.css） - CSS 文件本身含现代特性（如
::placeholder）时，若用 Autoprefixer 处理过，必须确保缓存的是构建后的最终文件，而非源文件 - 修改 CSS 后未更新
CACHE_NAME（如从shell-v1改为shell-v2），旧缓存不会自动失效，用户将长期看到过期样式
最常被跳过的动作，不是“怎么写缓存代码”，而是每次发版后忘记检查 caches.open('xxx').keys() 里 CSS 是否真存在、路径是否匹配、版本号是否递增——这些才是让 PWA 真正离线可用的硬门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
