manifest 里 icons 的 src 写的是 /icons/192.png,站点部署在 /shop/ 下,Chrome 装应用时提示图标下载失败,DevTools 里四条 404。日志里能对上时间点,这种反而好排。

manifest 里的相对路径按 manifest 文件所在目录解析,写成以斜杠开头的绝对路径就跑到域名根了。站点不在根目录时必然 404。这一点先确认清楚,后面就不用反复试。

{ "icons": [
  { "src": "icons/192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "icons/512.png", "sizes": "512x512", "type": "image/png" }
] }

「manifest 图标路径」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。

日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。权限不要一口气开到最大,先加到够用再往上试,范围小才好收。

把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

处理上按这个顺序:把 src 都改成相对 manifest 位置的路径;或者直接写死带子目录的完整路径;用 Application 面板的 Manifest 页看每条图标的解析结果;装一次 PWA 确认图标能显示。

结果对不对很好判断,Application 面板里两条图标都返回 200 装到桌面后图标正常。

作者 9823189