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

Le nouveau format d'icônes masquables permet de s'assurer 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 ne suivent pas au format d'icône masquable reçoit un arrière-plan blanc. Lorsque vous utilisez un masque masquable , cela garantit qu'elle occupe tout l'espace fourni par Android.

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

Phare signale les pages qui ne proposent pas d'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. 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 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 afin de vérifier que l'icône masquable s'affiche correctement. Consultez la section Mes icônes actuelles sont-elles prêtes ?

Ressources