El manifiesto no tiene un ícono adaptable

Los íconos enmascarables son un nuevo formato de ícono que garantiza que el ícono de tu AWP se vea bien en todos los dispositivos Android. En dispositivos Android más nuevos, los íconos de las AWP que no siguen el formato de ícono enmascarable tienen un fondo blanco. Cuando usas un ícono que se puede enmascarar, se garantiza que ocupe todo el espacio que Android le proporciona.

Por qué falla la auditoría de íconos enmascarables de Lighthouse

Lighthouse 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, haz lo siguiente:

  • Debe existir un manifiesto de aplicación 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 Maskable.app Editor para convertir un ícono existente en uno que se pueda enmascarar.

  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 que se puede enmascarar se muestre correctamente. Consulta ¿Mis íconos actuales están listos?

Recursos