O manifesto não tem um ícone mascarável

Os ícones mascaráveis são um novo formato de ícone que garante que seu ícone PWA tenha uma ótima aparência em todos os dispositivos Android. Em dispositivos Android mais recentes, os ícones PWA que não seguem o formato de ícone mascarável recebem um fundo branco. Quando você usa um ícone mascarável, isso garante que o ícone ocupe todo o espaço que o Android fornece para ele.

# Como a auditoria do ícone mascarável do Lighthouse falha

O Lighthouse sinaliza páginas que não têm suporte para ícones mascaráveis:

Para passar na auditoria:

• Deve existir um manifesto de aplicativo da web.
• O manifesto do aplicativo da web deve ter uma matriz de icons
• O icons deve conter um objeto com uma purpose e o valor dessa propriedade de purpose maskable.

# Como adicionar suporte a ícones mascaráveis ao seu PWA

1. Use o Editor Maskable.app para converter um ícone existente em um ícone mascarável.

2. Adicione a purpose a um dos objetos de icons em seu manifesto de aplicativo da web . Defina o valor de purpose como maskable ou any maskable. Veja valores.

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

3. Use o Chrome DevTools para verificar se o ícone mascarável está sendo exibido corretamente. Consulte Meus ícones atuais estão prontos?

# Recursos

• O código-fonte para a auditoria O manifesto não tem um ícone mascarável
• Suporte de ícone adaptável em PWAs com ícones mascaráveis
• Editor Maskable.app
• Adicionar um manifesto de aplicativo da web
• A propriedade icons no MDN