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

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

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

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

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

• Должен существовать манифест веб-приложения.
• В манифесте веб-приложения должен быть массив icons.
• В массиве icons должен быть один объект со свойством purpose. В свойстве purpose должно содержаться значение maskable.

# Добавление поддержки маскируемых значков в прогрессивное приложение (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 проверьте, правильно ли отображается маскируемый значок. См. раздел «Готовы ли мои текущие значки?».

# Ресурсы

• Исходный код аудита Manifest doesn't have a maskable icon
• Поддержка адаптивных значков в прогрессивных веб-приложениях (PWA) с маскируемыми значками
• Редактор Maskable.app
• Добавление манифеста веб-приложения
• Свойство icons в MDN