Cette page a été traduite par l'API Cloud Translation.

Compatibilité des icônes adaptatives dans les PWA avec icônes masquables

Thomas Steiner

Tiger Oakes

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>

Les icônes transparentes des PWA apparaissent dans des cercles blancs sur Android.

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>

Les icônes pouvant être masquées couvrent l'intégralité du cercle.

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>

Différentes formes d'icônes spécifiques à la plate-forme.

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>

Panneau "Applications" affichant les icônes de PWA recadrées

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>

Créer des icônes dans l'éditeur Maskable.app

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.