清单没有可屏蔽的图标

可屏蔽图标是一种新的图标格式，可确保您的 PWA 图标在所有 Android 设备上看起来都很棒。在较新的 Android 设备上，不遵循可屏蔽图标格式的 PWA 图标被赋予白色背景。当您使用可屏蔽图标时，它可以确保该图标占用 Android 为其提供的所有空间。

# Lighthouse 可屏蔽图标审计如何失败

Lighthouse 会标记没有可屏蔽图标支持的页面：

为了通过审计：

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

# 如何向 PWA 添加可屏蔽图标支持

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

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

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

3. 使用 Chrome DevTools 验证可屏蔽图标是否正确显示。请参阅我当前的图标是否准备就绪？

# 资源

• 清单没有可屏蔽的图标审计源代码
• PWA 中具有可屏蔽图标的自适应图标支持
• Maskable.app Editor
• 添加 Web 应用清单
• MDN 上的 icons 属性