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

.

Os ícones com máscara são um novo formato que garante que o ícone do PWA fique ótimo em todos os dispositivos Android. Em dispositivos Android mais recentes, os ícones de PWA que não seguem o formato de ícone mascarado têm um plano de fundo branco. Quando você usa um ícone mascarável, ele ocupa todo o espaço fornecido pelo Android.

Como a auditoria de ícone mascarado do Lighthouse falha

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

A auditoria de ícones mascarados na interface do Relatório do Lighthouse.

Para passar na auditoria:

  • Um manifesto de app da Web precisa existir.
  • O manifesto do app da Web precisa ter uma matriz icons.
  • A matriz icons precisa conter um objeto com uma propriedade purpose, e o valor dessa propriedade purpose precisa incluir maskable.

Como adicionar suporte a ícones mascarados ao seu PWA

  1. Use o Editor Maskable.app para converter um ícone em um ícone com máscara.

  2. Adicione a propriedade purpose a um dos objetos icons no manifesto do app da Web. Defina o valor de purpose como maskable. Consulte Valores.

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

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

Recursos