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 bien en todos los dispositivos Android. En los dispositivos Android más recientes, los íconos de las AWP que no siguen el formato de ícono enmascarable reciben un fondo blanco. Cuando usas un ícono enmascarable, garantizas que el ícono ocupe todo el espacio que le proporciona Android.

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

Lighthouse marca las páginas que no son compatibles con íconos enmascarables:

La auditoría del ícono enmascarable en la IU del informe de Lighthouse.

Para aprobar la auditoría, sigue estos pasos:

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

  2. Agrega la propiedad purpose a uno de los objetos icons en el manifiesto de tu 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. Use las Herramientas para desarrolladores de Chrome para verificar que el ícono enmascarable se muestre correctamente. Consulta ¿Mis íconos actuales están listos?

Recursos