PWA
移动端
Manifest.json 的好处
· 7 min read
Apple、Google 和 Microsoft 一直在依赖 Web App Manifest。填写一次,你的图标、主题色和分析统计就会在各处各就各位。
manifest 能给你带来什么
| 好处 | 你能得到什么 |
|---|---|
| 感觉原生的安装提示 | 只有当你的 manifest 声明了 icons、name、start_url 和 display 模式时,Chrome、Edge 和 Android 才会弹出“安装应用”横幅。 |
| 可离线的启动屏 | manifest 让你控制启动图、背景色和 maskable 图标,让离线启动看起来是有意为之的。 |
| 各处一致的元数据 | 当搜索引擎或社交平台检查你的 manifest 时,它们会读取到你精心设定的同一套标题、主题色和图标。 |
现代 manifest 的解剖
这些就是 Lighthouse 和 Android 在显示你的图标之前真正会检查的字段。
| 字段 | 它为何存在 | 专业提示 |
|---|---|---|
| name & short_name | 控制安装横幅和启动器上的标签文字。 | 让 short_name 保持在 12 个字符以内,以免在 Android 主屏幕上被截断。 |
| icons[] | 定义哪些 PNG 用于驱动安装界面、启动屏和 maskable 徽标。 | 包含 192、256、384 和 512 尺寸,并加上 purpose: "any maskable" 以获得最佳覆盖。 |
| start_url | 决定用户从 dock 启动时打开哪个路由。 | 追加 ?source=pwa 并在服务端读取它,以定制分析统计。 |
| display | 在 standalone、fullscreen 或 minimal-ui 体验之间切换。 | 使用 standalone 加上 theme_color,以匹配你品牌的浏览器外框。 |
manifest 图标从哪里开始
起步 JSON
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/?source=pwa",
"display": "standalone",
"scope": "/",
"background_color": "#0f172a",
"theme_color": "#312e81",
"icons": [
{ "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}把这个文件放到 /public/manifest.json,每当你导出一套新图标时,Favicon Tools 里的生成器就会让图标数组保持最新。
发布清单
把这个贴在你的部署看板上,让 manifest 在品牌重塑之后依然准确。
- 1
提供并链接 manifest
在 /manifest.json 提供 manifest,并通过 <link rel="manifest" href="/manifest.json"> 暴露它。
- 2
检查每个图标都能解析
确保每个被引用的图标确实存在于你的 CDN 上,并且与声明的尺寸相符。
- 3
对齐浏览器外框
添加 theme-color 和 background_color 元标签,让浏览器外框与你的图标配色相协调。
- 4
发布前做 lint 和审计
在每次发布前运行 npx next lint 以及 Lighthouse 的 PWA 审计,以捕捉缺失的 manifest 字段。
- 5
限定已安装应用的范围
把 manifest 的 scope 指向你的主应用 URL,让可安装的快捷方式保持在你的域名内。
自动化更新
把你的 manifest 模板和图标配置放在一起。当 CI 构建出一套新的 favicon 时,一并更新 JSON 并重新部署。
像原生应用一样测试
在 iOS、Android 和桌面版 Chrome 上安装你的站点。核实启动屏、图标蒙版和主题色与 manifest 里的值一致。
QA 团队喜欢一份简单的清单:安装、离线启动、检查图标质量、核实分析参数。