Icônes d'applications qui s'adaptent aux plates-formes
Que sont les icônes masquables ?
Si vous avez installé une progressive web app sur un téléphone Android récent, vous remarquerez peut-être que l'icône s'affiche sur un arrière-plan blanc. Android Oreo a introduit les icônes adaptatives, qui affichent les icônes d'application sous différentes formes sur différents modèles d'appareils. Les icônes qui ne respectent pas ce nouveau format sont dotées d'un arrière-plan blanc.
Les icônes masquées sont un nouveau format d'icône qui vous offre plus de contrôle et qui permet à votre progressive web app d'utiliser des icônes adaptatives. Si vous fournissez une icône masquable, elle peut remplir toute la forme et s'afficher correctement sur tous les appareils Android. Firefox et Chrome sont récemment compatibles avec ce nouveau format, que vous pouvez adopter dans vos applications.
Mes icônes actuelles sont-elles prêtes ?
Étant donné que les icônes masquables doivent prendre en charge diverses formes, vous fournissez une image opaque avec une marge intérieure que le navigateur peut recadrer selon la forme et la taille requises. Il est préférable de ne pas se baser sur une forme particulière, car la forme finale varie selon le navigateur et la plate-forme.
Heureusement, il existe une "zone de sécurité minimale" bien définie et standardisé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. Il est possible que le bord extérieur de 10% soit recadré.
Vous pouvez vérifier quelles parties de vos icônes arrivent 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, puis accédez au panneau Application. Dans la section Icônes, vous pouvez sélectionner l'option Afficher uniquement la zone de sécurité minimale pour les icônes masquables. Vos icônes sont rognées afin que seule la zone sûre soit visible. Si votre logo est visible dans cette zone de sûreté, vous n'avez rien d'autre à faire.
Pour tester votre icône masquable avec les différentes formes Android, utilisez l'outil Maskable.app créé par Tiger. Ouvrez une icône. Maskable.app vous permettra d'essayer différentes formes et tailles. Vous pourrez ensuite partager l'aperçu avec d'autres membres de votre équipe.
Comment adopter les icônes masquables ?
Si vous souhaitez créer une icône masquable à partir d'une icône existante, vous pouvez utiliser l'éditeur Maskable.app. Importez votre icône, ajustez la couleur et la taille, puis exportez l'image.
Une fois que vous avez créé une icône masquable et que vous l'avez testée dans les outils de développement, vous devez mettre à jour le fichier manifeste de votre application Web pour qu'il 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.
Pour inclure des icônes masquables, le champ purpose indique au navigateur comment votre icône doit être utilisée. Par défaut, les icônes ont la fonction "any". Ces icônes seront redimensionnées sur un arrière-plan blanc sur Android.
{
…
"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"`
},
…
],
…
}
Les icônes masquantes doivent utiliser une valeur différente pour purpose: "maskable". Cela indique qu'une image est destinée à être utilisée avec des masques d'icône, ce qui vous permet de mieux contrôler le résultat.
Ainsi, vos icônes n'auront pas d'arrière-plan blanc. 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.
Vous pouvez ainsi créer vos propres icônes masquables et vous assurer que votre application s'affiche bien au bord de l'écran (et pour ce que cela vaut : cercle à cercle, ovale à ovale GOAL).
Remerciements
Cet article a été examiné par Joe Medley.