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:

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 incluremaskable
.
Ajouter la prise en charge des icônes masquables à votre PWA
- Utilisez l'éditeur Maskable.app pour convertir une icône existante en icône masquable.
Ajoutez la propriété
purpose
à l'un des objetsicons
de votre fichier manifeste d'application Web. Définissez la valeur depurpose
surmaskable
. Consultez la section Valeurs.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
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 ?