Аудит Manifest doesn't have a maskable icon

Published on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Маскируемые значки — это новый формат значков, благодаря которому значки прогрессивных веб-приложений (PWA) отлично выглядят на всех устройствах с ОС Android. На новых устройствах с ОС Android значки прогрессивных веб-приложений, которые не соответствуют формату маскируемых значков, имеют белый фон. При использовании маскируемого значка он занимает все пространство, отведенное для него ОС Android.

Почему не удается пройти аудит маскируемых значков в Lighthouse

Lighthouse помечает страницы, не поддерживающие маскируемые значки:

Аудит маскируемых значков в пользовательском интерфейсе отчетов Lighthouse.

Для успешного прохождения аудита должны быть выполнены указанные ниже условия.

  • Должен существовать манифест веб-приложения.
  • В манифесте веб-приложения должен быть массив 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.

  2. Добавьте свойство purpose в один из объектов icons в манифесте веб-приложения. Задайте для свойства purpose значение maskable или any maskable. См. раздел «Значения».

    {

    "icons": [

    {
    "src": "путь/к/маскируемому_значку.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.