要修复Safari离线缓存失效，需依次确认Service Worker注册与激活状态、fetch事件是否正确拦截并返回缓存响应，并强制清除旧缓存重装Worker。
要修复Safari中离线缓存失效问题，必须先确认Service Worker是否已注册、是否处于激活状态、是否正确拦截fetch请求并返回缓存响应，否则页面在断网时会白屏或报错。
启用Safari开发者菜单并打开网页检查器
打开Safari浏览器 → 点击顶部菜单栏「Safari」→「设置」→ 切换到「高级」标签页 → 勾选「在菜单栏中显示“开发”菜单」。【这一步必须完成，否则后续所有调试入口均不可见】
打开目标网页（必须是HTTPS或localhost）→ 按 Command+Option+I 打开「开发者工具」→ 确保当前位于「控制台」标签页。
验证Service Worker注册状态与运行环境
在控制台输入 navigator.serviceWorker 并回车。若返回 ServiceWorkerContainer {…}，说明支持且上下文合法；若返回 undefined，则可能运行在 file:// 协议、HTTP 站点或隐私模式下——【Safari 16 仅允许在 HTTPS 或 localhost 下注册 Service Worker，HTTP 站点会静默失败，控制台无任何提示】。
接着输入 navigator.serviceWorker.getRegistration() 回车。若返回 Promise resolved 且含 active 或 waiting 字段，表示已注册；若返回 undefined，需手动注册。
执行注册代码：if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(r => console.log('✅', r)).catch(e => console.error('❌', e)); }
注意：/sw.js 必须真实存在、可访问，且响应头包含 Content-Type: application/javascript；路径 404 或 MIME 类型错误时，控制台只报 generic error，不提示具体原因。
进入Service Workers专用调试界面
刷新页面 → 点击顶部菜单栏「开发」→「显示网页资源」→ 在左侧边栏展开「Service Workers」节点。
你会看到当前页面注册的 Service Worker 实例，状态为「Waiting」或「Active」。
若状态为「Waiting」：点击右侧「Skip Waiting」按钮强制激活；
若状态为「Active」但缓存未生效：继续下一步排查 fetch 拦截逻辑。
检查fetch事件是否真正拦截并返回缓存响应
方法一：在「Service Workers」面板中，勾选「Update on reload」→ 刷新页面 → 观察控制台是否输出你 sw.js 中 fetch 事件里的 console.log。没有输出，说明 fetch 监听器未被触发或未正确绑定。
方法二：切换到「控制台」标签页 → 输入 self.addEventListener('fetch', e => console.log('? fetch intercepted:', e.request.url)) → 刷新页面 → 若有日志，说明监听器生效；若无，检查 sw.js 中是否漏写 self.addEventListener('fetch', ...) 或被语法错误阻断执行。
方法三：在「Application」→「Cache Storage」中展开对应缓存名称 → 查看其中存储的 Request URL 是否与页面实际发起的请求完全一致（包括查询参数）。若页面请求 /api/data?v=2 但缓存里只有 /api/data，caches.match() 默认不会命中——此时需在匹配时传入 { ignoreSearch: true } 参数。
强制清除旧缓存并重装Service Worker
第一步：在「Application」→「Cache Storage」中，右键每个缓存项 → 选择「Delete」；
第二步：回到「Service Workers」面板 → 对当前条目右键 → 依次选择「Stop」→「Unregister」；
第三步：关闭所有该域名的标签页 → 重新打开网页 → 控制台执行注册代码 → 刷新页面 → 检查是否重新进入 install → activate → active 流程。
这一步能排除旧缓存干扰和版本残留，确保新 sw.js 脚本从零开始运行。
