清单没有可遮盖式图标
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
可遮罩的图标是一种新的图标格式,可确保您的 PWA 图标在所有 Android 设备上都能看起来很棒。在较新的 Android 设备上,不遵循可遮罩图标格式的 PWA 图标会采用白色背景。使用可遮盖式图标时,可确保图标占据 Android 为其提供的所有空间。
Lighthouse 可遮盖的图标审核失败的原因
Lighthouse 会标记不支持可遮罩图标的网页:
为了顺利通过审核,请执行以下操作:
- 必须存在网络应用清单。
- 网页应用清单必须包含
icons
数组。
icons
数组必须包含一个具有 purpose
属性的对象,并且该 purpose
属性的值必须包含 maskable
。
如何为 PWA 添加可遮罩图标支持
- 使用 Maskable.app 编辑器将现有图标转换为可遮罩的图标。
将 purpose
属性添加到网络应用清单中的某个 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。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-04-16。"],[],[]]