Si vous avez installé une progressive web app (PWA) sur un téléphone Android récent, vous remarquerez peut-être que l'icône de l'application a un arrière-plan blanc. Android 8.0 a introduit les icônes adaptatives, qui affichent les icônes d'applications sous différentes formes sur tous les modèles d'appareils. Les icônes qui n'utilisent pas ce format ont un arrière-plan blanc.
Les icônes masquées sont un nouveau format d'icône pour Chrome et Firefox qui permet à votre progressive web app d'utiliser des icônes adaptatives et vous permet de mieux contrôler l'apparence de votre icône.
Mes icônes actuelles sont-elles prêtes ?
Étant donné que les icônes masquables doivent prendre en charge différentes formes, vous devez fournir une image opaque avec une marge intérieure que le navigateur peut recadrer selon la forme et la taille requises pour n'importe quel navigateur ou plate-forme.
La spécification des icônes masquables inclut une "zone de sécurité minimale" normalisée que toutes les plates-formes respectent. Les parties importantes de votre icône, comme votre logo, doivent se trouver dans une zone circulaire au centre de l'icône, avec un rayon de 40% de sa largeur. Le bord extérieur de 10% peut être recadré sur certaines plateformes.
Vous pouvez vérifier quelles parties de vos icônes se trouvent dans la zone de sécurité à l'aide des outils pour les développeurs Chrome. Une fois la progressive web app ouverte, lancez les outils de développement et accédez au panneau Application. Dans la section Icônes, vous pouvez choisir d'afficher uniquement la zone de sécurité minimale pour les icônes masquables. Cela rogne vos icônes pour que seule la zone sûre soit visible. Si votre logo est visible dans cette zone de sécurité, votre icône est prête.
Pour tester votre icône masquable avec différentes formes Android, utilisez Maskable.app de Tiger Oakes. Ouvrez une icône. Maskable.app vous permet d'essayer différentes formes et tailles, et de partager l'aperçu avec votre équipe.
Comment adopter les icônes masquables ?
Pour créer une icône masquable à partir d'une icône existante, vous pouvez utiliser l'éditeur Maskable.app. Importez votre icône, ajustez sa couleur et sa taille, puis exportez l'image.
Après avoir créé une icône masquable et l'avoir testée dans les outils de développement, vous devez mettre à jour le fichier manifeste de votre application Web pour qu'elle pointe vers le nouvel élément. Le fichier manifeste de l'application Web fournit des informations sur votre application Web dans un fichier JSON et inclut un tableau icons.
Le champ purpose indique au navigateur comment votre icône doit être utilisée. Par défaut, les icônes ont la fonction "any". Dans Android, ces icônes sont redimensionnées sur un fond blanc.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Pour rendre une icône masquable, définissez sa valeur purpose sur "maskable" afin d'indiquer qu'elle doit être utilisée avec des masques d'icône. Cela supprime l'arrière-plan blanc et vous donne plus de contrôle sur l'apparence de l'icône. Vous pouvez également spécifier plusieurs finalités séparées par un espace (par exemple, "any maskable") si vous souhaitez que votre icône masquable soit utilisée sans masque sur d'autres appareils.
Remerciements
Cette page a été examinée par Joe Medley.