如果您在新款 Android 手机上安装了渐进式 Web 应用 (PWA),可能会注意到该应用的图标具有白色背景。Android 8.0 引入了自适应图标,可在各种型号的设备上以各种形状显示应用图标。不使用此格式的图标采用白色背景。
![Android 设备上白色圆圈中的 PWA 图标](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=5&hl=sv)
可遮盖式图标是适用于 Chrome 和 Firefox 的一种新图标格式,可让您的渐进式 Web 应用使用自适应图标,并更好地控制图标的外观。
![在 Android 设备上覆盖整个圆圈的 PWA 图标](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=5&hl=sv)
我当前的图标准备好了吗?
由于可遮盖图标需要支持各种形状,因此您需要提供带有一些内边距的不透明图片,以便浏览器能够将图片剪裁为任何浏览器或平台所需的形状和大小。
可遮盖图标规范包括所有平台都遵循的标准化“最小安全区”。图标的重要部分(例如徽标)必须位于图标中心的圆形区域内,且半径等于图标宽度的 40%。在某些平台上,外侧的 10% 边缘可能会被剪裁。
您可以使用 Chrome 开发者工具检查图标的哪些部分位于安全区域内。打开渐进式 Web 应用,启动开发者工具并前往应用面板。在图标部分中,您可以选择仅显示可遮盖式图标的最小安全区域。这样会修剪图标,只显示安全区域。如果您的徽标在此安全区域内可见,则表明您的图标已准备就绪。
![开发者工具中的“Applications”面板,显示边缘被剪裁的 PWA 图标](https://web.developers.google.cn/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=5&hl=sv)
如需测试具有各种 Android 形状的可遮盖图标,请使用 Tiger Oakes 的 Maskable.app。打开图标,Maskable.app 可让您尝试各种形状和大小,并与团队分享预览。
如何采用可遮盖式图标?
如需根据现有图标创建可遮盖图标,您可以使用 Maskable.app Editor。上传您的图标,调整颜色和大小,然后导出图片。
![Maskable.app Editor 屏幕截图](https://web.developers.google.cn/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=5&hl=sv)
创建可遮盖图标并在开发者工具中对其进行测试后,您需要更新 Web 应用清单以指向新资源。Web 应用清单以 JSON 文件中提供 Web 应用的相关信息,并包含一个 icons
数组。
purpose
字段可告知浏览器应如何使用您的图标。默认情况下,图标的用途是 "any"
。在 Android 中,这些图标在白色背景上会调整大小。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
如需使图标可遮盖,请将其 purpose
值设置为 "maskable"
,以指示图标应与图标遮罩一起使用。这会移除白色背景,并更好地控制图标的外观。如果您希望在其他设备上使用可遮盖图标而不蒙版,还可以指定多个以空格分隔的用途(例如 "any maskable"
)。
致谢
此页面由 Joe Medley 审核。