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

Os ícones mascaráveis são um novo formato que garante que o ícone do PWA tenha uma ótima aparência em todos os dispositivos Android. Em dispositivos Android mais recentes, os ícones do PWA que não seguem o formato de ícone mascarável recebem um plano de fundo branco. O uso de um ícone mascarável garante que ele ocupe todo o espaço fornecido pelo Android.

Como a auditoria de ícones mascaráveis do Lighthouse falha

O Lighthouse sinaliza páginas que não são compatíveis com ícones mascaráveis:

Auditoria do ícone mascarável 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 para ícones mascaráveis ao PWA

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

  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 mascarável está sendo exibido corretamente. Consulte Meus ícones atuais estão prontos?

Recursos