如果您在新近的 Android 手机上安装了渐进式 Web 应用 (PWA), 您可能会注意到应用的图标背景为白色。Android 8.0 引入了 自适应图标,可在各种设备上以各种形状显示应用图标 模型。未采用此格式的图标的背景为白色。
<ph type="x-smartling-placeholder">![Android 设备上白色圆圈中的 PWA 图标](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=7&hl=ro)
可遮罩的图标是 Chrome 和 Firefox 中的一种新图标格式, 渐进式 Web 应用使用自适应图标,让您更好地掌控自己的 图标的外观。
<ph type="x-smartling-placeholder">![Android 上覆盖整个圆圈的 PWA 图标](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=7&hl=ro)
我当前的图标准备好了吗?
由于可遮罩图标需要支持各种形状,因此您需要提供 带有一定内边距的不透明图片,浏览器可将其裁剪为 根据任何浏览器或平台调整形状和尺寸
<ph type="x-smartling-placeholder">可遮罩图标规范包括一个标准化 “最小安全区”所有平台都遵循的标准本课程的 图标(例如徽标)必须位于 半径等于图标宽度的 40% 的图标。外侧 10% 的边缘可能 在某些平台上遭到剪裁
您可以使用 Chrome 查看图标的哪些部分位于安全区域内 开发者工具。打开渐进式 Web 应用后,启动开发者工具并前往 Application 面板。在图标部分,您可以选择 仅显示可遮盖式图标的最小安全区域。这样会修剪图标 只有安全区域可见。如果您的徽标在此安全区域内可见, 您的图标已准备就绪
<ph type="x-smartling-placeholder">![DevTools 中的“Applications”面板,显示 PWA 图标已剪裁边缘](https://web.developers.google.cn/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=7&hl=ro)
如需使用各种 Android 形状测试可遮盖式图标,请使用 Tiger Oakes 的 Maskable.app。只需打开一个图标,即可借助 Maskable.app 来 尝试各种形状和尺寸,并与您的团队分享预览效果。
如何采用可遮罩的图标?
要根据现有图标创建可遮罩的图标,您可以使用 Maskable.app Editor。上传图标,调整 然后导出图片
<ph type="x-smartling-placeholder">![Maskable.app 编辑器屏幕截图](https://web.developers.google.cn/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=7&hl=ro)
创建可遮盖图标并在开发者工具中对其进行测试后,您需要更新
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 审核。