Ícones do app que se adaptam às plataformas
O que são ícones mascaráveis?
Se você instalou um Progressive Web App em um smartphone Android recente, talvez perceba que o ícone aparece com um fundo branco. O Android Oreo lançou ícones adaptativos, que mostram ícones de apps em várias formas em diferentes modelos de dispositivos. Os ícones que não seguem esse novo formato recebem planos de fundo brancos.
Os ícones mascaráveis são um novo formato que oferece mais controle e permitem que o Progressive Web App use ícones adaptativos. Se você fornecer um ícone mascarável, ele poderá preencher toda a forma e ter uma ótima aparência em todos os dispositivos Android. O Firefox e o Chrome recentemente adicionaram suporte a esse novo formato, e você pode adotá-lo nos seus apps.
Os ícones atuais estão prontos?
Como os ícones mascaráveis precisam oferecer suporte a várias formas, você fornece uma imagem opaca com padding, que o navegador pode cortar para a forma e o tamanho necessários. É melhor não depender de nenhuma forma específica, já que a forma final varia de acordo com o navegador e a plataforma.
Felizmente, há uma "zona de segurança mínima" bem definida e padronizada, que todas as plataformas respeitam. As partes importantes do ícone, como o logotipo, precisam estar dentro de uma área circular no centro com um raio igual a 40% da largura. A borda externa de 10% pode ser cortada.
É possível verificar quais partes dos ícones entram na zona segura com o Chrome DevTools. Com o Progressive Web App aberto, inicie o DevTools e navegue até o painel Application. Na seção Ícones, você pode escolher Mostrar apenas a área segura mínima para ícones mascaráveis. Seus ícones serão cortados para que apenas a área segura fique visível. Se o logotipo estiver visível dentro dessa área segura, está tudo pronto.
Para testar o ícone mascarável com várias formas do Android, use a ferramenta Maskable.app criada pelo Tigre. Abra um ícone e o Maskable.app permitirá que você teste várias formas e tamanhos e possa compartilhar a visualização com outras pessoas na sua equipe.
Como faço para adotar ícones mascaráveis?
Para criar um ícone mascarável com base em um ícone atual, use o Maskable.app Editor. Faça o 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, atualize o
manifesto do app da Web para apontar 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.
Para a inclusão de ícones mascaráveis, o campo purpose informa ao navegador como o ícone
precisa ser usado. Por padrão, os ícones terão a finalidade "any". Esses ícones serão
redimensionados sobre um fundo branco no Android.
{
…
"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"`
},
…
],
…
}
Os ícones mascaráveis precisam usar um valor diferente para purpose: "maskable". Isso indica
que uma imagem deve ser usada com máscaras de ícones, oferecendo mais controle sobre o resultado.
Dessa forma, os ícones não terão um fundo branco. 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.
Com isso, você pode criar seus próprios ícones mascaráveis, garantindo que o app tenha uma ótima aparência de ponta a ponta (e, no que vale, círculo a círculo, oval para oval considerados)
Agradecimentos
Este artigo foi revisado por Joe Medley.