安卓上添加到主屏后图标是一块白底方块,名称也变成了域名,Chrome 的 Manifest 面板提示图标下载失败。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
{"icons": [
{"src": "/icons/192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/icons/512.png", "sizes": "512x512", "type": "image/png"}
]}
manifest 里的图标路径写成相对地址,页面在子目录下时被解析到错误位置,服务器返回 404。尺寸标注和实际文件不符,安装器也会跳过这一项。这一点先确认清楚,后面就不用反复试。
「manifest 图标」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。
改完隔一天再看一次,当场正常不代表能稳住。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。
具体做法是,图标地址改成以斜杠开头的绝对路径,确认在浏览器里能直接打开;提供 192 和 512 两个尺寸的 PNG,purpose 写 any,别只给 SVG;改完清一次站点数据,重新安装再看桌面图标。
改完照着核一遍,重新安装后桌面图标是设计稿里的图形,名称显示 manifest 里的 short_name。
