[!info] related notes

• 所属 MOC: DevTools Application MOC
• Service Worker: Service Worker 生命周期调试
• Storage: IndexedDB 与 Cache Storage 调试
• Lighthouse: Lighthouse

DevTools Manifest 与 PWA 调试

先区分两个问题

Installability / app presentation
→ Web App Manifest + secure delivery + browser/platform rules

Offline / programmable network behavior
→ Service Worker + Cache/Network strategy

Service Worker 常用于 PWA 离线体验，但不能把“有 Service Worker”机械写成所有浏览器 PWA 安装的统一必要条件。

Manifest 加载失败

先检查：

• HTML 是否真的链接 manifest；
• manifest request status / Content-Type；
• JSON 是否有效；
• URL 是否被 CSP/认证/路径问题阻止。

Application 的 Manifest 视图能帮助发现字段和资源问题。

安装信息异常

检查：

• name / short_name；
• icons；
• start_url；
• display / display_override；
• scope；
• HTTPS/localhost 等安全交付条件。

具体 install UI 与标准要求会因浏览器/平台不同而变化，所以不要把某个 Chrome UI 行为当成所有浏览器的 PWA 定义。

安装后启动位置不对

重点检查 start_url 与 scope 的关系，以及安装入口来自哪一页面。

不要只改 router base 猜测。

图标/名称不对

用 Manifest 视图检查实际解析到的：

• icon URL；
• size/type；
• name/short_name；
• cache 是否仍提供旧 manifest/icon。

离线不工作

这已经不是 Manifest 本体问题。

转到：

• Service Worker registration/lifecycle；
• fetch handler；
• Cache Storage；
• offline fallback；
• cache strategy。

详见 Service Worker 生命周期调试。

迁移检查

给两个故障：

A. 浏览器不展示预期安装入口。
B. 应用已经安装，但断网后首页打不开。

分别回答：

1. 为什么 A 先查 Manifest/HTTPS/browser installability，而不是 Cache Storage？
2. 为什么 B 先查 Service Worker/network strategy，而不是只改 manifest？
3. start_url/scope 错误会表现成什么？
4. 为什么不同浏览器平台的安装 UI 不能当作统一 PWA 标准？