El manifiesto no tiene un ícono adaptable

Los íconos enmascarables son un nuevo formato de ícono que garantiza que el ícono de la AWP se vea excelente en todos los dispositivos Android. En los dispositivos Android más nuevos, los íconos de la AWP que no siguen que el formato de ícono adaptable tenga un fondo blanco. Cuando uses una máscara garantiza que ocupe todo el espacio que Android le proporciona.

Cómo falla la auditoría del ícono enmascarable de Lighthouse

Faro marca las páginas que no admiten íconos enmascarables:

La auditoría de íconos enmascarables en la IU del informe de Lighthouse.

Para aprobar la auditoría, sigue estos pasos:

  • Debe existir un manifiesto para apps web.
  • El manifiesto de la app web debe tener un array icons.
  • El array icons debe contener un objeto con una propiedad purpose. y el valor de esa propiedad purpose debe incluir maskable.

Cómo agregar compatibilidad con íconos enmascarables a tu AWP

  1. Usa el Editor de Máscaras.app para convertir un ícono existente en uno enmascarable.

  2. Agrega la propiedad purpose a uno de los objetos icons en el manifiesto de la app web. Establece el valor de purpose en maskable. Consulta Valores.

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

  3. Usa las Herramientas para desarrolladores de Chrome para verificar que el ícono enmascarable se muestre correctamente. Consulta ¿Mis íconos actuales están listos?

Recursos