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.
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.
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.
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.
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.
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.