清单没有可遮盖式图标

可遮罩的图标是一种新的图标格式，可确保您的 PWA 图标在所有 Android 设备上都能看起来很棒。在较新的 Android 设备上，不遵循可遮罩图标格式的 PWA 图标会采用白色背景。使用可遮盖式图标时，可确保图标占据 Android 为其提供的所有空间。

Lighthouse 可遮盖的图标审核失败的原因

Lighthouse 会标记不支持可遮罩图标的网页：

Lighthouse 报告界面中的可遮盖图标审核。

为了顺利通过审核，请执行以下操作：

  • 必须存在网络应用清单。
  • 网页应用清单必须包含 icons 数组。
  • icons 数组必须包含一个具有 purpose 属性的对象，并且该 purpose 属性的值必须包含 maskable。

如何为 PWA 添加可遮罩图标支持

  1. 使用 Maskable.app 编辑器将现有图标转换为可遮罩的图标。

  2. 将 purpose 属性添加到网络应用清单中的某个 icons 对象。将 purpose 的值设置为 maskable。请参阅值。

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. 使用 Chrome 开发者工具验证可遮罩的图标是否正确显示。 请参阅我的当前图标是否已准备就绪？

资源