Le fichier manifeste ne comporte pas d'icône masquable

.

Les icônes masquables sont un nouveau format d'icône qui garantit que l'icône de votre PWA est bien affichée sur tous les appareils Android. Sur les appareils Android plus récents, les icônes PWA qui ne respectent pas le format d'icône masquable sont associées à un arrière-plan blanc. Lorsque vous utilisez une icône masquable, elle occupe tout l'espace qu'Android lui fournit.

Échec de l'audit des icônes masquables Lighthouse

Lighthouse signale les pages qui ne sont pas compatibles avec les icônes masquables:

Audit des icônes masquables dans l'interface utilisateur du rapport Lighthouse

Pour réussir l'audit:

  • Un fichier manifeste d'application Web doit exister.
  • Le fichier manifeste de l'application Web doit contenir un tableau icons.
  • Le tableau icons doit contenir un objet avec une propriété purpose, et la valeur de cette propriété purpose doit inclure maskable.

Ajouter la prise en charge des icônes masquables à votre PWA

  1. Utilisez Maskable.app Editor pour convertir une icône existante en icône masquable.

  2. Ajoutez la propriété purpose à l'un des objets icons de votre fichier manifeste d'application Web. Définissez la valeur de purpose sur maskable. Consultez la section Valeurs.

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

  3. Utilisez les outils pour les développeurs Chrome pour vérifier que l'icône masquable s'affiche correctement. Consultez Mes icônes actuelles sont-elles prêtes ?

Ressources