可屏蔽图标是一种新的图标格式,可确保您的 PWA 图标在所有 Android 设备上看起来都很棒。在较新的 Android 设备上,不遵循可屏蔽图标格式的 PWA 图标被赋予白色背景。当您使用可屏蔽图标时,它可以确保该图标占用 Android 为其提供的所有空间。
Lighthouse 可屏蔽图标审计如何失败
Lighthouse 会标记没有可屏蔽图标支持的页面:
![Lighthouse Report UI 中的可屏蔽图标审计。](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/w0lXCcsZdOeLZuAw3wbY.jpg?auto=format)
为了通过审计:
- 必须存在 Web 应用清单。
- Web 应用清单必须有一个
icons
数组。 icons
数组必须包含具有purpose
属性的对象,并且purpose
属性的值必须包含maskable
。
Caution
Lighthouse 不会检查指定为可屏蔽图标的图像。您需要手动验证图像是否显示良好。
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.
如何向 PWA 添加可屏蔽图标支持
使用 Maskable.app Editor 将现有图标转换为可屏蔽图标。
将
purpose
属性添加到您的Web 应用清单中的其中一个icons
对象中。将purpose
的值设置为maskable
或any maskable
。请参阅值。{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any maskable"
}
]
…
}使用 Chrome DevTools 验证可屏蔽图标是否正确显示。请参阅我当前的图标是否准备就绪?
资源
Published on • 改进文章