O manifesto não tem um ícone mascarável

Published on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Os ícones mascaráveis são um novo formato de ícone que garante que seu ícone PWA tenha uma ótima aparência em todos os dispositivos Android. Em dispositivos Android mais recentes, os ícones PWA que não seguem o formato de ícone mascarável recebem um fundo branco. Quando você usa um ícone mascarável, isso garante que o ícone ocupe todo o espaço que o Android fornece para ele.

Como a auditoria do ícone mascarável do Lighthouse falha

O Lighthouse sinaliza páginas que não têm suporte para ícones mascaráveis:

A auditoria do ícone mascarável na IU do relatório Lighthouse.

Para passar na auditoria:

  • Deve existir um manifesto de aplicativo da web.
  • O manifesto do aplicativo da web deve ter uma matriz de icons
  • O icons deve conter um objeto com uma purpose e o valor dessa propriedade de purpose maskable.
Caution

O Lighthouse não inspeciona a imagem especificada como ícone mascarável. Você precisará verificar manualmente se a imagem é exibida corretamente.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

Como adicionar suporte a ícones mascaráveis ao seu PWA

  1. Use o Editor Maskable.app para converter um ícone existente em um ícone mascarável.

  2. Adicione a purpose a um dos objetos de icons em seu manifesto de aplicativo da web . Defina o valor de purpose como maskable ou any maskable. Veja valores.

    {

    "icons": [

    {
    "src": "path/to/maskable_icon.png",
    "sizes": "196x196",
    "type": "image/png",
    "purpose": "any maskable"
    }
    ]

    }
  3. Use o Chrome DevTools para verificar se o ícone mascarável está sendo exibido corretamente. Consulte Meus ícones atuais estão prontos?

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.