清单没有可遮盖式图标

可遮盖图标是一种新的图标格式，可确保您的 PWA 图标在所有 Android 设备上都有出色的显示效果。在较新的 Android 设备上，未遵循可遮盖图标格式的 PWA 图标被赋予白色背景。当您使用可遮盖图标时，它会确保该图标占据 Android 为其提供的所有空间。

Lighthouse 可遮盖图标审核如何失败

Lighthouse 标记不支持可遮盖图标的页面：

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

若要通过审核，请按以下步骤操作：

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

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

  1. 使用 Maskable.app Editor 将现有图标转换为可遮盖图标。

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

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

  3. 使用 Chrome 开发者工具验证可遮盖图标能否正确显示。 请参阅我当前的图标准备好了吗？

资源