清单没有可屏蔽的图标
可屏蔽图标是一种新的图标格式,可确保您的 PWA 图标在所有 Android 设备上看起来都很棒。在较新的 Android 设备上,不遵循可屏蔽图标格式的 PWA 图标被赋予白色背景。当您使用可屏蔽图标时,它可以确保该图标占用 Android 为其提供的所有空间。
Lighthouse 可屏蔽图标审计如何失败 #
Lighthouse 会标记没有可屏蔽图标支持的页面:
为了通过审计:
- 必须存在 Web 应用清单。
- Web 应用清单必须有一个
icons
数组。 icons
数组必须包含具有purpose
属性的对象,并且purpose
属性的值必须包含maskable
。
如何向 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 验证可屏蔽图标是否正确显示。请参阅我当前的图标是否准备就绪?
资源 #
Last updated: — Improve article