El manifiesto no tiene un icono enmascarable

Published on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

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:

La auditoría de ícono enmascarable en la interfaz de usuario de Lighthouse Report.

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.
Precaución

Lighthouse no inspecciona la imagen que se especifica como el ícono enmascarable. Deberá verificar manualmente que la imagen se muestre bien.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.