Skip to content
学习 衡量 博客 Case studies 关于
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
本页内容
  • Lighthouse 可屏蔽图标审计如何失败
  • 如何向 PWA 添加可屏蔽图标支持

清单没有可屏蔽的图标

May 6, 2020
Available in: Español, 日本語, 한국어, Português, Русский, English
本页内容
  • Lighthouse 可屏蔽图标审计如何失败
  • 如何向 PWA 添加可屏蔽图标支持

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

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

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

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

为了通过审计:

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

小心

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 的值设置为 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 属性
Last updated: May 6, 2020 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.