清单没有可遮盖式图标
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
可遮盖图标是一种新的图标格式,可确保您的 PWA 图标在所有 Android 设备上都有出色的显示效果。在较新的 Android 设备上,未遵循可遮盖图标格式的 PWA 图标被赋予白色背景。当您使用可遮盖图标时,它会确保该图标占据 Android 为其提供的所有空间。
Lighthouse 可遮盖图标审核如何失败
Lighthouse 标记不支持可遮盖图标的页面:
若要通过审核,请按以下步骤操作:
- Web 应用清单必须存在。
- Web 应用清单必须包含
icons
数组。
icons
数组必须包含一个具有 purpose
属性的对象,并且该 purpose
属性的值必须包含 maskable
。
如何为 PWA 添加可遮盖图标支持
- 使用 Maskable.app Editor 将现有图标转换为可遮盖图标。
将 purpose
属性添加到 Web 应用清单中的某个 icons
对象。将 purpose
的值设置为 maskable
。请参阅值。
{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
}
]
…
}
使用 Chrome 开发者工具验证可遮盖图标能否正确显示。
请参阅我当前的图标准备好了吗?
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-04-16。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]