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:
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 propriedadepurpose
, e o valor dessa propriedadepurpose
precisa incluirmaskable
.
Como adicionar suporte para ícones mascaráveis ao PWA
- Use o Maskable.app Editor para converter um ícone atual em um mascarável.
Adicione a propriedade
purpose
a um dos objetosicons
no manifesto do app da Web. Defina o valor depurpose
comomaskable
. Consulte Valores.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Use o Chrome DevTools para verificar se o ícone mascarável está sendo exibido corretamente. Consulte Meus ícones atuais estão prontos?