能够适应平台的应用图标。
什么是可遮盖式图标?
如果您在新款 Android 手机上安装了渐进式 Web 应用,可能会注意到该图标显示为白色背景。Android Oreo 引入了自适应图标,可在不同设备型号上以各种形状显示应用图标。未遵循这种新格式的图标将采用白色背景。
可遮盖式图标是一种新的图标格式,不仅赋予您更多掌控力,还可让您的渐进式 Web 应用使用自适应图标。如果您提供可遮盖图标,则图标可以填满整个形状,并在所有 Android 设备上呈现出色效果。Firefox 和 Chrome 最近添加了对这种新格式的支持,您可以在应用中采用这种格式。
我当前的图标准备好了吗?
由于可遮盖图标需要支持各种形状,因此您需要提供带有一些内边距的不透明图片,让浏览器能够剪裁到所需的形状和大小。最好不要依赖于任何特定形状,因为最终形状因浏览器和平台而异。
幸运的是,所有平台都认可一个明确定义的标准化“最小安全区”。图标的重要部分(例如徽标)应位于图标中心的圆形区域内,且半径等于图标宽度的 40%。外侧的 10% 边缘可能会被剪裁。
您可以使用 Chrome 开发者工具查看图标的哪些部分位于安全区域内。打开渐进式 Web 应用,启动开发者工具并前往应用面板。在图标部分中,您可以选择仅显示可遮盖式图标的最小安全区域。系统会剪辑您的图标,以便仅显示安全区域。如果您的徽标在此安全区域内可见,您就可以放心使用。
如需测试可遮盖图标以及各种 Android 形状,请使用 Tiger 创建的 Maskable.app 工具。打开一个图标,然后 Maskable.app 可让您尝试各种形状和尺寸,还可以与团队中的其他人分享预览。
如何采用可遮盖式图标?
如果您想根据现有图标创建可遮盖图标,则可以使用 Maskable.app Editor。上传您的图标,调整颜色和大小,然后导出图片。
创建可遮盖图标并在开发者工具中对其进行测试后,您需要更新 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 审核。