清单没有可遮盖式图标

可遮罩的图标是一种新的图标格式，可确保 PWA 图标的外观 。新款 Android 设备不支持 PWA 图标 可遮盖式图标格式的背景为白色。使用遮盖时 图标，可确保图标占据 Android 为其提供的所有空间。

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 开发者工具验证可遮盖式图标是否正常显示。 请参阅我当前的图标准备好了吗？

资源