cache.add()对css无反应因url非绝对同源、未拦截fetch请求或非http环境；须用绝对url、在fetch事件中拦截并返回缓存、html与css均需预缓存、更新靠cachename而非url参数，且file://协议下service worker不工作。
Service Worker里cache.add()为什么对CSS文件没反应
因为cache.add()只接受字符串URL，且必须是同源的完整路径；如果传入相对路径（比如"./style.css"）或未加协议/域名，请求会失败，但控制台可能不报错，缓存就静默跳过。
- 确保传入的是绝对URL：比如
new URL("./style.css", location).href，而不是直接写"./style.css" -
cache.add()本质是发起一次fetch()再存结果，所以目标CSS必须能被正常请求到——检查Network面板里该URL是否返回200、Content-Type是否为text/css - 若CSS带查询参数（如
style.css?v=1.2），缓存键就是带参的完整URL，后续请求必须完全一致才能命中
离线时CSS加载失败：不是缓存没生效，而是HTML没提前声明
浏览器在解析HTML时遇到<link rel="stylesheet" href="style.css">，会立即发起请求。如果此时网络断开、Service Worker又没拦截这个请求，就会失败——和缓存是否存在无关。
- 必须在Service Worker的
fetch事件中拦截CSS请求，并从cache中读取：event.respondWith(caches.match(event.request).then(r => r || fetch(event.request))) - 拦截范围要精确：
event.request.destination === "style"可过滤出纯CSS请求，避免误伤其他资源 - HTML本身也得缓存（比如用
cache.addAll(["/", "style.css"])），否则离线连HTML都打不开，更别说CSS了
缓存CSS后样式不更新：版本控制靠URL还是cacheName
Service Worker的cache是静态快照，改了CSS文件内容，旧缓存不会自动失效。靠改cacheName（如"styles-v2"）最稳妥，比在URL后加时间戳更可控。
- 不要依赖
Cache-Control: max-age头来刷新CSS缓存——离线时这个头根本不起作用 - 更新逻辑建议放在install事件里：
caches.delete("styles-v1").then(() => caches.open("styles-v2"))，再批量add() - 如果用
importScripts()动态加载CSS配置，注意它不触发fetch事件，得手动在install里预缓存那些URL
本地文件协议（file://）下Service Worker完全不工作
这是硬性限制：Chrome/Firefox等现代浏览器禁止在file://协议下注册Service Worker，无论你代码写得多对，都会报Uncaught DOMException: Failed to register a ServiceWorker。
- 必须用HTTP服务启动页面，哪怕只是本地起一个
python3 -m http.server或VS Code的Live Server插件 - 开发阶段别用双击HTML打开的方式测试，那走的就是
file://，缓存逻辑永远不执行 - 移动端调试时也要确认地址栏是
http://或https://开头，不是ionic://或capacitor://这类自定义协议（它们对SW支持不一）
真正卡住人的往往不是缓存逻辑本身，而是URL是否合法、请求是否被正确拦截、以及——你根本没在HTTP环境下运行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
