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:
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 propiedadpurpose
, y el valor de esa propiedadpurpose
debe incluirmaskable
.
Cómo agregar compatibilidad con íconos enmascarables a tu AWP
- Usa Maskable.app Editor para convertir un ícono existente en uno enmascarable.
Agrega la propiedad
purpose
a uno de los objetosicons
en el manifiesto de tu app web. Establece el valor depurpose
enmaskable
. Consulta Valores.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Use las Herramientas para desarrolladores de Chrome para verificar que el ícono enmascarable se muestre correctamente. Consulta ¿Mis íconos actuales están listos?