检查结果
- 必须填写 name — 安装提示显示的就是它。
- 必须填写 short_name — 主屏幕图标的名称就是它。
manifest.webmanifest
{
"name": "",
"short_name": "",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"lang": "en",
"icons": [
{
"src": "/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-180x180.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}添加到你的 head 部分
<link rel="manifest" href="/manifest.webmanifest" /> <meta name="theme-color" content="#000000" /> <link rel="apple-touch-icon" href="/icons/icon-180x180.png" />
图标预览
上传图标以生成整套图标
网页应用清单的作用
清单是把一个网站变成可安装应用的 JSON 文件。Chrome 读取它来决定是否弹出安装提示；Android 读取它来获取启动图标和启动画面；iOS 则会读取其中一部分内容，用于主屏幕。
Chrome 弹出安装提示前的要求
- 已链接、并以 JSON 形式返回的清单
- 同时具备 name 和 short_name
- 192×192 和 512×512 的图标
- display 设为 standalone、fullscreen 或 minimal-ui
- 离线时仍能加载的 start_url
- 站点通过 HTTPS 提供
图标尺寸及其用途
| 尺寸 | 用于 | 备注 |
|---|---|---|
| 192×192 | Chrome, Android — required | Install prompt |
| 512×512 | Chrome, Android — required | Splash screen |
| 180×180 | iOS | apple-touch-icon |
| 384×384 | Android xxhdpi | |
| 152×152 | iPad | |
| 144×144 | Android xhdpi | |
| 128×128 | Chrome Web Store | |
| 96×96 | Android mdpi | |
| 72×72 | Android ldpi | Legacy |
Maskable 图标
Android 会根据设备把启动图标重新裁成圆形、方圆形或圆角矩形。普通图标后面会被画上一个白色方块。Maskable 图标则会填满整个画布，并把重要图形保留在一个覆盖宽度 80% 的居中圆形之内 — 外围那 20% 是系统可能裁掉的留白。
常见问题
没有出现安装提示
检查清单是否在 head 部分被链接、是否返回 200、是否有 192 和 512 的图标，以及站点是否使用 HTTPS。Chrome DevTools → Application → Manifest 会列出缺少的项。
Android 图标外面有一个白色方块
你缺少 maskable 图标。添加一个，并把 purpose 设为 maskable。
安装后的应用在浏览器标签页中打开
start_url 落在 scope 之外，或者 display 被设成了 browser。
启动画面的颜色不对
background_color 在应用渲染前为启动画面上色；theme_color 则为状态栏上色。