清单没有可屏蔽的图标

Available in: English、Español、Português、Русский、日本語和한국어
本页内容

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

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

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

Lighthouse Report UI 中的可屏蔽图标审计。

为了通过审计：

  • 必须存在 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 验证可屏蔽图标是否正确显示。请参阅我当前的图标是否准备就绪？

资源 #

Last updated: — Improve article
Return to all articles
分享