Se você tiver instalado um App Web Progressivo (PWA) em um smartphone Android recente, talvez o ícone do app tenha um plano de fundo branco. O Android 8.0 introduziu ícones adaptativos, que mostram ícones de apps em várias formas nos modelos de dispositivos. Ícones que não usam esse formato têm fundo branco.
Os ícones mascaráveis são um novo formato de ícone do Chrome e do Firefox que permitem que seu Progressive Web App use ícones adaptativos e oferecem mais controle sobre a aparência do ícone.
Os ícones atuais estão prontos?
Como os ícones mascaráveis precisam oferecer suporte a várias formas, é necessário fornecer uma imagem opaca com padding que o navegador possa cortar no formato e tamanho necessários para qualquer navegador ou plataforma.
A especificação de ícones mascaráveis inclui uma "zona de segurança mínima" padronizada que todas as plataformas respeitam. As partes importantes do ícone, como o logotipo, precisam estar dentro de uma área circular no centro dele com um raio igual a 40% da largura. A borda externa de 10% pode ser cortada em algumas plataformas.
Você pode verificar quais partes dos ícones estão dentro da zona segura usando o Chrome DevTools. Com o Progressive Web App aberto, inicie o DevTools e navegue até o painel Application. Na seção Ícones, você pode optar por Mostrar apenas a área segura mínima para ícones mascaráveis. Isso corta os ícones para que apenas a área segura fique visível. Se seu logotipo estiver visível dentro dessa área segura, ele estará pronto.
Para testar o ícone mascarável com várias formas do Android, use o Maskable.app do Tiger Oakes. Abra um ícone, e o Maskable.app permite testar várias formas e tamanhos e compartilhar a visualização com sua equipe.
Como faço para adotar ícones mascaráveis?
Para criar um ícone mascarável com base em um ícone atual, use o Editor Maskable.app. Faça upload do ícone, ajuste a cor e o tamanho e exporte a imagem.
Depois de criar um ícone mascarável e testá-lo no DevTools, é necessário atualizar
o manifesto do app da Web para que ele aponte para o novo recurso. O manifesto do app da Web fornece informações sobre o app em um arquivo JSON e inclui uma matriz icons.
O campo purpose informa ao navegador como o ícone precisa ser usado. Por padrão,
os ícones têm a finalidade "any". No Android, esses ícones são redimensionados em um segundo plano
branco.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Para tornar um ícone mascarável, defina o valor purpose como "maskable" para indicar
que ele precisa ser usado com máscaras de ícones. Isso remove o plano de fundo branco e
oferece mais controle sobre a aparência do ícone. Você também pode especificar várias
finalidades separadas por espaço (por exemplo, "any maskable") se quiser que o
ícone mascarável seja usado sem máscara em outros dispositivos.
Agradecimentos
Esta página foi revisada por Joe Medley.