El manifiesto no tiene un icono enmascarable

Los íconos enmascarables son un nuevo formato de ícono que garantiza que el ícono de su PWA se vea genial en todos los dispositivos Android. En los dispositivos Android más nuevos, los íconos de PWA que no siguen el formato de ícono enmascarable tienen un fondo blanco. Cuando usted usa un ícono enmascarable, asegura que el ícono ocupe todo el espacio que le proporciona Android.

# Cómo falla la auditoría de los íconos enmascarables de Lighthouse

Lighthouse marca las páginas que no tienen soporte de íconos enmascarables:

Para aprobar la auditoría:

• Debe existir un manifiesto de aplicación web.
• El manifiesto de la aplicación web debe tener una matriz icons
• La matriz 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 su PWA

1. Utilice Maskable.app Editor para convertir un ícono existente en un ícono enmascarable.

2. Agregue la propiedad purpose a uno de los objetos de icons en el manifiesto de su aplicación web. Establezca el valor de purpose en maskable o any maskable. Consulte la sección Valores.

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

3. Utilice Chrome DevTools para verificar que el ícono enmascarable se muestre correctamente. Consulte ¿Están listos mis íconos actuales?

# Recursos

• El código fuente de El manifiesto no tiene una auditoría de ícono enmascarable
• Soporte de íconos adaptables en PWA con íconos enmascarables
• Editor de Maskable.app
• Agregar un manifiesto de aplicación web
• La propiedad de los icons en MDN