清单没有可遮盖式图标

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

资源