在 Safari 上调试 PWA 时，最让人头疼的就是离线页面死活不出现、缓存不生效、Service Worker 一直卡在 waiting 状态。这时候，得靠 Web 检查器的 Application 面板来做可视化调试——Safari 可不像 Chrome 那样有个一键更新的按钮，所有操作都得手动干预。

具体来说：

• 先在高级设置中勾选“显示开发菜单”。
• 然后打开检查器，切换到 Application 标签。
• 找到 Waiting 状态的 Service Worker，右键选择 Skip Waiting。
• 最后核对 Cache Storage 里的缓存有没有到位。

这套流程一步都不能省。

当你开发 PWA 时遇到离线失败或缓存失效，必须启用 Web 检查器的 Application 面板进行底层调试——Safari 不提供 Chrome 那样的实时更新开关，所有调试动作都依赖开发者工具的接口和手动干预。

启用 Safari 开发者工具并打开 Application 面板

先进入 Safari → 设置 → 高级，勾选上“在菜单栏中显示开发菜单”。这一步跳过的话，后续所有入口都找不到。

然后随便打开一个网页（推荐用 safari://extensions 或者空白页），点击顶部菜单栏的“开发”→“显示网页检查器”，再切换到 Application 标签页。

注意：如果这个标签根本没出现，说明开发菜单没开启，或者当前页面本身就不支持 Service Worker 上下文（比如用 file:// 协议打开的本地页面）。

查看并强制激活等待中的 Service Worker

在 Application 面板左侧找到 Service Workers，展开后右侧会列出所有已注册实例及其状态：

• Activated（正在控制页面）
• Waiting（新版本就绪但未接管）
• Installing（安装中）

如果目标 Worker 显示的是 Waiting，说明新 sw.js 已经加载，但浏览器没有自动激活——Safari 默认不会跳过 waiting 阶段，必须手动干预。

右键这个条目，选择【Skip Waiting】。这一步会立即终止旧 Worker、激活新 Worker，让它开始拦截 fetch 请求。

注意：【此操作不可逆，旧版本缓存策略将立即失效】

检查预缓存资源是否写入 Cache Storage

展开左侧的 Cache Storage，看看有没有以你 PWA 域名命名的缓存（比如 https://my-pwa.dev），或者自定义的 CACHE_NAME（比如 my-pwa-cache-v1）。

如果列表直接是空的，那说明 install 事件压根没成功执行。常见原因包括：

• sw.js 路径不对（必须是根相对路径如 /sw.js）
• caches.open() 被拒绝（比如页面没走 HTTPS）
• event.waitUntil() 里的 Promise 被 reject 导致安装中断

点开某个缓存名称，右侧会显示所有已缓存的 URL。逐个核对 index.html、manifest.json、关键的 JS/CSS 是否都在里面。只要缺了任何一个 HTML 入口文件，离线访问必然失败。

模拟离线环境并验证 fetch 响应逻辑

在 Application 面板顶部的工具栏里，点一下【Offline】开关（图标是个断开的 Wi-Fi 信号）。开启后所有网络请求都会被阻断，只能靠缓存或者 Service Worker 主动响应。

刷新页面，观察 Network 面板：

• 如果 HTML 返回 200 且来源显示为 service-worker，说明 fetch 事件已正确拦截。
• 如果返回的是 Failed to load resource，那说明 caches.match() 没命中，而且也没有 fallback 到 fetch() 调用。

这时候需要检查 fetch 事件监听器是否注册，匹配逻辑是否排除了导航请求（request.destination === 'document'）。

在 Console 里输入 na vigator.serviceWorker.controller，确认返回的对象存在并且 state 为 activated。如果返回 null，说明当前页面没有被任何 Service Worker 控制。

需要重新检查：注册代码是否在 window.load 后执行、sw.js 是否返回 200 状态码。

清除异常残留并重建注册环境

如果之前调试搞得一团糟，可以用两种方法清理残留。

方法一：仅清空当前域名数据

在 Application → Clear storage 面板中，勾选【Website data】和【Cache storage】，点击【Remove now】。这会删除该域名下所有缓存、Cookie 及 Service Worker 注册元数据，但保留其他网站数据。

方法二：全量重置（适用于反复调试失败）

点击 Safari 顶部菜单栏历史记录 → 清除历史记录… → 时间范围选【所有历史记录】→ 必须勾选【Cookie 与网站数据】→ 点击【清除历史记录】。Safari 会自动退出并重启，所有 Service Worker 注册信息被系统级清空。

重启后第一次访问 PWA 页面时，务必在 Console 里执行 na vigator.serviceWorker.register('/sw.js')，并且确认 Promise resolve 了，再检查 Application 面板有没有出现新注册项。这一步可以验证 HTTPS 环境、路径合法性以及脚本语法是否正确。