PWA 图标：让你的应用可安装
安装提示不是一个设计选择，而是一份检查清单。漏掉 192 或 512 图标，浏览器就会悄悄拒绝提供安装。这是确切的那一套。
安装提示取决于图标
只有当 manifest 满足一组要求时，浏览器才会提供安装 PWA 的选项，而图标就是其中之一。具体来说，icons 数组至少必须包含一个 192x192 和一个 512x512 的 PNG。少了任何一个，提示就永远不会触发，而且没有任何用户会注意到的错误。
192 是启动器图标。512 用于启动画面和更高密度的显示屏。两者都必须是那些确切尺寸下真实的 PNG，而不是用 CSS 拉伸的一张图。
让它可安装
- 1
导出两个必需的 PNG
创建 192x192 的 icon-192.png 和 512x512 的 icon-512.png。这就是安装提示会检查的那两个。
- 2
添加一个 maskable 版本
导出一个 512x512，把你的标志居中放在安全区内并在四周留出内边距，然后标记为 purpose: maskable，这样 Android 就能把它裁切成圆形、squircle 或圆角方形。
- 3
在 manifest 中把它们全部列出
把每个图标连同其 src、sizes、type 和 purpose 放进 manifest 的 icons 数组。确切格式见下方代码。
- 4
链接 manifest 和 apple-touch-icon
在你的 head 中添加 <link rel="manifest" href="/manifest.json"> 和一个单独的 <link rel="apple-touch-icon">。iOS 读取的是后者，而不是 manifest。
- 5
验证提示
在 Chrome 中打开你的网站，检查安装控件是否出现，并在浏览器开发者工具的 application 面板中确认 manifest 没有错误。
manifest 的 icons 数组
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}purpose 为 any 的 192 和 512 满足安装要求。maskable 条目让 Android 能在不裁掉你标志的情况下调整图标形状。
为什么 maskable 是单独的
Android 启动器会把图标裁切成设备主题所用的任何形状。一个填满整个方形的普通图标，其四角会被切掉。maskable 图标把你的标志居中放在带内边距的安全区内，这样启动器就能裁切边缘而不触及重要部分。
你仍然要在 maskable 图标旁保留一个 purpose any 的图标。不做裁切的界面（标签页、任务切换器）会使用 any 版本，这样它就不会留有多余的内边距。
常见问题
为什么我的 PWA 安装提示不显示？
最常见的图标原因是 manifest 的 icons 数组中缺少 192x192 或 512x512 的 PNG。两者都是必需的。也要检查 manifest 是否已链接并被提供，以及应用是否在 HTTPS 上并带有 service worker。
PWA 需要哪些图标尺寸？
manifest 中的一个 192x192 和一个 512x512 的 PNG 是安装提示所必需的。为 Android 添加一个 512x512 的 maskable 版本，为 iOS 添加一个 180x180 的 apple-touch-icon。
我需要 maskable 图标吗？
对 Android 来说，需要。没有它，启动器会裁切你的满幅图标并切掉四角。maskable 图标把你的标志保持在安全区内，让它能适应任何形状。
manifest 会设置 iOS 主屏幕图标吗？
不会。iOS 在添加到主屏幕时会忽略 manifest 的 icons。它使用 apple-touch-icon link 标签，所以即使 manifest 完整，你的 head 中也需要一个。