清单没有可屏蔽的图标

Published on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

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

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

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

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

为了通过审计:

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

Lighthouse 不会检查指定为可屏蔽图标的图像。您需要手动验证图像是否显示良好。

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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

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

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

    {

    "icons": [

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

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

资源

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.