Compatibilidade com ícones adaptativos em PWAs com ícones mascaráveis

Thomas Steiner
Tiger Oakes

Se você instalou um Progressive Web App (PWA) em um smartphone Android recente, pode notar que o ícone do app tem um plano de fundo branco. O Android 8.0 introduziu ícones adaptativos, que mostram ícones de apps em diversas formas em diferentes modelos de dispositivos. Os ícones que não usam esse formato têm planos de fundo brancos.

Ícones PWA em círculos brancos no Android
Ícones de PWA transparentes aparecem dentro de círculos brancos no Android.

Ícones com máscara são um novo formato de ícone para Chrome e Firefox que permite que seu app da Web progressiva use ícones adaptáveis e oferece mais controle sobre a aparência do ícone.

Ícones de PWA abrangendo todo o círculo no Android
Os ícones mascaráveis cobrem todo o círculo.

Meus í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 na forma e no tamanho necessários para qualquer navegador ou plataforma.

Diferentes formas de ícones específicos para cada 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 com um raio igual a 40% da largura dele. A borda 10% externa pode ser cortada em algumas plataformas.

É possível verificar quais partes dos ícones estão na zona segura usando o Chrome DevTools. Com o Progressive Web App aberto, inicie o DevTools e navegue até o painel Aplicativo. Na seção Ícones, você pode escolher Mostrar apenas a menor área segura para ícones mascaráveis. Isso corta seus ícones para que apenas a área segura fique visível. Se o logotipo estiver visível nesta área segura, o ícone está pronto.

Painel de aplicativos no DevTools mostrando ícones de PWA com bordas cortadas
O painel "Applications" mostrando ícones de PWA cortados.

Para testar seu ícone 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 com máscara com base em um ícone existente, use o Editor Maskable.app. Faça upload do ícone, ajuste a cor e o tamanho e exporte a imagem.

Captura de tela do editor do Maskable.app
Como criar ícones no editor do Maskable.app.

Depois de criar um ícone com máscara 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 seu app da Web em um arquivo JSON e inclui uma matriz icons.

O campo purpose informa ao navegador como o ícone deve ser usado. Por padrão, os ícones têm uma finalidade de "any". No Android, esses ícones são redimensionados em um plano de fundo 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 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 mascarado seja usado sem uma máscara em outros dispositivos.

Agradecimentos

Esta página foi revisada por Joe Medley.