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

Os ícones mascaráveis são um novo formato que garante a aparência do ícone do PWA. funciona bem em todos os dispositivos Android. Em dispositivos Android mais recentes, os ícones PWA que não seguem o formato de ícone mascarável recebe um plano de fundo branco. Quando você usa uma máscara ele garante que o ícone ocupe todo o espaço fornecido pelo Android.

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

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

A auditoria de ícone mascarável na interface do relatório do Lighthouse.

Para passar na auditoria:

  • É necessário ter um manifesto de app da Web.
  • 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 mascaráveis ao seu PWA

  1. Use o Maskable.app Editor para converter um ícone existente em um ícone 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