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 s'affiche correctement sur tous les appareils Android. Sur les appareils Android plus récents, les icônes de PWA qui ne sont pas au format masquable sont associées à un arrière-plan blanc. Lorsque vous utilisez une icône masquable, cela garantit qu'elle occupe tout l'espace qu'Android lui fournit.

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

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

Audit des icônes masquables dans l'interface utilisateur des rapports Lighthouse.

Pour réussir l'audit:

  • Un fichier manifeste d'application Web doit exister.
  • Le fichier manifeste de l'application Web doit comporter 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 l'éditeur Maskable.app 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 Valeurs.

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

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

Ressources