Si vous avez installé une progressive web app (PWA) sur un téléphone Android récent, vous : vous remarquerez peut-être que l'icône de l'application a un fond blanc. Android 8.0 lancé Les icônes adaptatives, qui affichent les icônes d'application de différentes formes sur l'appareil des modèles de ML. Les icônes qui n'utilisent pas ce format ont des arrière-plans blancs.
<ph type="x-smartling-placeholder">![Icônes de PWA dans des cercles blancs sur Android](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=9&hl=fr)
Les icônes masquables sont un nouveau format d'icône pour Chrome et Firefox qui vous permet Les progressive web apps utilisent des icônes adaptatives et vous permettent de mieux contrôler de l'icône.
<ph type="x-smartling-placeholder">![Icônes de PWA recouvrant l'intégralité du cercle sur Android](https://web.developers.google.cn/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=9&hl=fr)
Mes icônes actuelles sont-elles prêtes ?
Étant donné que les icônes masquables doivent prendre en charge diverses formes, vous devez fournir une image opaque avec une marge intérieure que le navigateur peut recadrer au format pour tout navigateur ou plate-forme.
<ph type="x-smartling-placeholder">La spécification d'icône masquable inclut un attribut standardisé "zone de sécurité minimale" que toutes les plates-formes respectent. Les parties importantes de votre (votre logo, par exemple) doit se trouver dans une zone circulaire au centre dont le rayon est égal à 40% de sa largeur. L'arête extérieure de 10% peut être rognées sur certaines plates-formes.
Vous pouvez vérifier quelles parties de vos icônes se trouvent dans la zone de sécurité à l'aide de Chrome DevTools. Une fois votre progressive web app ouverte, lancez les outils de développement et accédez à le panneau Application. Dans la section Icônes, vous pouvez choisir de : Afficher uniquement la zone de sécurité minimale pour les icônes masquables Cela réduit vos icônes afin que seule la zone de sécurité est visible. Si votre logo est visible dans cette zone de sécurité, votre icône est prête.
<ph type="x-smartling-placeholder">![Panneau "Applications" dans les outils de développement affichant les icônes de PWA avec des bords recadrés](https://web.developers.google.cn/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=9&hl=fr)
Pour tester votre icône masquable avec différentes formes Android, utilisez Tiger Oakes Maskable.app Ouvrez une icône, et Maskable.app vous permet tester différentes formes et tailles et 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 la Éditeur Maskable.app Importez votre icône, ajustez le couleur et taille, puis exportez l'image.
<ph type="x-smartling-placeholder">![Capture d'écran de l'éditeur Maskable.app](https://web.developers.google.cn/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=9&hl=fr)
Après avoir créé une icône masquable et l'avoir testée dans les outils de développement, vous devez la mettre à jour
le fichier manifeste de votre application Web pour qu'il pointe vers le nouvel élément. La
le fichier manifeste d'application Web fournit des informations sur votre application Web dans un fichier JSON ;
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 l'objectif "any"
. Dans Android, ces icônes sont redimensionnées
en arrière-plan.
{
…
"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"
pour indiquer
qu'elle doit être utilisée
avec des masques d'icône. Cela supprime l'arrière-plan blanc et
vous permet de mieux contrôler l'apparence de l'icône. Vous pouvez également spécifier plusieurs
séparés par des espaces (par exemple, "any maskable"
) si vous souhaitez que
icône masquable à utiliser sans masque sur d'autres appareils.
Remerciements
Cette page a été examinée par Joe Medley.