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

Thomas Steiner
Tiger Oakes

Se você tiver instalado um Progressive Web App (PWA) em um smartphone Android recente, pode perceber que o ícone do app tem um fundo branco. Lançamento do Android 8.0 ícones adaptativos, que mostram ícones do app em várias formas em vários dispositivos. de modelos de machine learning. Ícones que não usam esse formato têm fundo branco.

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

Os ícones mascaráveis são um novo formato de ícone do Chrome e do Firefox que permite O App Web Progressivo usa ícones adaptativos e oferece mais controle sobre 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, você precisa fornecer uma imagem opaca com padding que o navegador possa cortar para que o tamanho formato e tamanho para qualquer navegador ou plataforma.

Diferentes formas de ícones específicas da plataforma.

A especificação de ícones mascaráveis inclui um rótulo padronizado, "zona mínima de segurança" que todas as plataformas respeitam. As partes importantes da sua , tal como o seu logotipo, deve estar dentro de uma área circular no centro do ícone com um raio igual a 40% da largura dele. A borda externa 10% pode ser cortados em algumas plataformas.

É possível verificar quais partes dos ícones estão dentro da zona segura usando o Chrome do DevTools. Com o Progressive Web App aberto, inicie o DevTools e navegue até o painel Aplicativo. Na seção Ícones, você pode optar por Mostra apenas a área de segurança mínima para ícones mascaráveis. Isso corta seus ícones para apenas a área segura fica visível. Se o logotipo estiver visível nessa área segura, seu ícone está pronto.

Painel de aplicativos no DevTools exibindo ícones do PWA com bordas cortadas
O painel "Aplicativos", mostrando ícones do PWA cortados.

Para testar o ícone mascarável com várias formas do Android, use o Maskable.app. Abra um ícone, e o Maskable.app permitirá que você 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 já existente, use o Editor do Maskable.app. Envie seu ícone, ajuste as cor e tamanho e exportar a imagem.

Captura de tela do editor do Maskable.app
Criação de ícones no editor do Maskable.app.

Depois de criar um ícone mascarável e testá-lo no DevTools, você precisa atualizar manifesto do app da Web para apontar para o novo recurso. A manifesto de 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 a finalidade "any". No Android, esses ícones são redimensionados em um plano de fundo.

{
  …
  "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 dele como "maskable" para indicar que deve ser usado com máscaras de ícones. Isso remove o fundo branco e oferece mais controle sobre a aparência do ícone. Também é possível especificar várias para fins de separação por espaço (por exemplo, "any maskable") se você quiser que ícone mascarável a ser usado sem máscara em outros dispositivos.

Agradecimentos

Esta página foi revisada por Joe Medley.