В манифесте нет маскируемого значка.

Маскируемые значки — это новый формат значков, который гарантирует, что ваш значок PWA будет отлично выглядеть на всех устройствах Android. На новых устройствах Android значки PWA, которые не соответствуют формату маскируемых значков, имеют белый фон. Когда вы используете маскируемый значок, он гарантирует, что значок займет все пространство, предоставленное для него Android.

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

Страницы с пометками маяка , на которых нет поддержки маскируемых значков:

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

Для прохождения проверки:

  • Манифест веб-приложения должен существовать.
  • Манифест веб-приложения должен содержать массив icons .
  • Массив icons должен содержать один объект со свойством purpose , а значение этого свойства purpose должно включать в себя maskable .

Как добавить поддержку маскируемых значков в PWA

  1. Используйте редактор Maskable.app , чтобы преобразовать существующий значок в маскируемый значок.

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

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

  3. Используйте Chrome DevTools, чтобы убедиться, что маскируемый значок отображается правильно. См. Готовы ли мои текущие значки?

Ресурсы