PWA
配置
Web App Manifest 指南：逐字段解析一个真正的 manifest.json
· 7 min read
web app manifest 是一个小小的 JSON 文件，告诉操作系统如何安装你的站点：它的名称、图标和颜色。这里就是一个真实的示例，逐字段解析。
manifest 有什么用
manifest 是把网站变成操作系统可安装对象的关键。当用户把你的站点添加到主屏幕时，浏览器会读取 manifest 来决定图标、图标下方的名称、启动画面，以及应用是带浏览器界面还是不带界面打开。
它就是纯 JSON。你需要一个文件，从每个页面链接它，再加上它所指向的图标 PNG。下面的每个字段都对应着用户看得到的某样东西。
关键字段
| 字段 | 控制什么 |
|---|---|
| name | 完整的应用名称，显示在安装提示和启动画面上 |
| short_name | 主屏幕图标下方的名称，用在空间紧张的地方 |
| icons | 图标集合。包含 192 和 512 的 PNG，外加一个标为 maskable 的图标以适配 Android 的形状 |
| theme_color | 应用四周操作系统界面的颜色，比如状态栏 |
| background_color | 应用加载时显示的启动画面背景色 |
| display | 应用如何打开。standalone 会隐藏浏览器界面，让它更像原生应用 |
| start_url | 从主屏幕启动时应用打开的页面 |
一个完整的 manifest.json
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}两个标准图标和一个 maskable，这样 Android 就能裁剪成任意 launcher 形状而不会切到你的 logo。
把它接入你的页面
<link rel="manifest" href="/manifest.json">把这行放进每个页面的 <head>。没有这个 link 标签，文件虽然存在，却没有任何东西会去读它。
常见问题
什么是 web app manifest？
一个小小的 JSON 文件，告诉浏览器和操作系统如何安装你的站点：它的名称、图标、颜色，以及它该如何打开。正是它让一个页面变得可以安装到主屏幕。
theme_color 和 background_color 有什么区别？
theme_color 给应用四周的操作系统界面上色，比如状态栏。background_color 填充应用加载时显示的启动画面。它们常常取同一个值，但控制的是不同的界面。
manifest.json 该放在哪里？
从一个稳定的路径提供它，比如你的站点根目录，然后用 <link rel="manifest" href="/manifest.json"> 引用它。它所列出的图标必须能从 src 字段里的路径解析到。
普通网站需要 manifest 吗？
只有当你想要安装提示和主屏幕图标时才需要。一个纯信息类站点没有它也运行良好，但任何用户可能保存到手机上的站点都会从中受益。