必须在install阶段用cache.addAll()预缓存CSS文件，否则首次离线访问必然白屏或样式断裂；因CSS是渲染阻塞资源，HTML解析时同步等待其加载，断网且未预缓存将导致请求失败、渲染中断。
必须在 install 阶段用 cache.addAll() 预缓存 CSS 文件，否则首次离线访问必然白屏或样式断裂。这不是缓存逻辑写错了，而是 CSS 根本没“提前就位”——HTML 解析到 <link rel="stylesheet" href="styles.css"> 时会同步阻塞等待，断网 + 未预缓存 = 请求失败 + 渲染中断。
为什么 install 阶段缓存 CSS 是硬性要求
CSS 是渲染阻塞资源，浏览器不会等 Service Worker 的 fetch 事件响应才继续解析 HTML。它只认两件事：网络能通，或者资源已在 Cache Storage 里静默就绪。
-
cache.addAll()是原子操作：所有 URL 必须全部成功，否则 install 失败，Service Worker 不会激活 -
fetch事件中按需缓存（如caches.match(event.request)）对 CSS 来说太晚了——请求已经发出并失败了 - 即使你只改了一行 CSS，也必须更新
CACHE_NAME，否则旧缓存永不淘汰，用户永远看不到新样式
urlsToCache 中 CSS 路径写错的典型表现
控制台不报错，DevTools → Application → Cache Storage 里就是找不到 styles.css——因为 cache.addAll() 对路径极其敏感，静默失败是常态。
Generate HVAC Service Company Client Education Handout
下载
清晰、专业的暖通空调服务客户教育手册，包含图片、常见问题及可操作的下一步，帮助客户理解并提升参与度。
- 必须用绝对路径，且和 HTML 中
<link href="">的值完全一致：比如 HTML 里是/css/main.css，就不能写成css/main.css或./css/main.css - 构建后路径可能变化：若用 Vite 打包，CSS 被哈希重命名成
main.a1b2c3.css，缓存列表里就得填这个最终产物名，不是源文件名main.css - 带查询参数的 URL（如
styles.css?v=2.1）会被当作独立键，后续请求必须含相同参数才能命中；不推荐，改CACHE_NAME更可靠
离线时 CSS 仍加载失败？检查这三个拦截点
缓存了 CSS 不等于它能被用上——Service Worker 还得在运行时把请求真正导向缓存。
立即学习“前端免费学习笔记（深入）”；
-
fetch事件必须监听并响应 CSS 请求：event.respondWith(caches.match(event.request).then(r => r || fetch(event.request))) - 建议加类型过滤，避免误伤其他请求：
if (event.request.destination === 'style')再走缓存逻辑 -
index.html本身也必须被cache.addAll()缓存，否则连 HTML 都打不开，CSS 根本没机会被请求
开发阶段 CSS 缓存总不生效？先确认协议和环境：90% 的“缓存无效”问题卡在启动方式上——file:// 协议下 Service Worker 完全不工作，这是浏览器强制限制。必须用 http:// 或 https://（包括 localhost）启动服务。
