Prise en charge des icônes adaptatives dans PWA avec des icônes masquables

Que sont les icônes masquables?

Si ha instalado una aplicación la toile progresiva en un teléfono Android reciente, es posible que observe que el icono aparece con un fondo blanco. Android Oreo introdujo íconos adaptables, que muestran íconos de aplicaciones en una variedad de formas en diferentes modelos de dispositivos. Los iconos que no siguen este nuevo formato tienen un fondo blanco.

Les icônes masquables sont un nouveau format d'icône qui vous donne plus de contrôle et permet à votre application Web progressive d'utiliser des icônes réactives. Si vous fournissez une icône masquable, votre icône peut remplir la forme entière et bien paraître sur tous les appareils Android. Firefox et Chrome ont récemment ajouté la prise en charge de ce nouveau format, et vous pouvez l'adopter dans vos applications.

Mes icônes actuelles sont-elles prêtes?

Dado que los íconos enmascarables deben admitir una variedad de formas, proporcione una imagen opaca con algo de relleno que el le navigateur puede recortar posteriormente en la forma y tamaño deseados. Es mejor no depender de ninguna forma en particular, ya que puede variar según el navegador y la plataforma.

Heureusement, il existe une normalisé «Zona mínima segura» que respetan todas las plataformas. Las partes importantes de su icono, como su Logo, deben estar dentro de un área circular en el centro del icono con un radio igual al 40% del ancho del icono. El borde exterior del 10% se puede recortar.

Vous pouvez vérifier quelles parties de vos icônes se trouvent dans la zone de sécurité avec Chrome DevTools. Une fois votre application Web progressive ouverte, lancez DevTools et accédez au Demander panneau. Dans le Icônes section, vous pouvez choisir Afficher uniquement la zone de sécurité minimale pour les icônes masquables. Sus iconos se recortarán de modo que solo el área segura être visible. Si su logotipo es visible dentro de esta área segura, está listo para comenzar.

Si vous souhaitez prévisualiser votre icône masquable d'une autre manière, elle peut apparaître sur Android, j'ai créé un outil appelé Maskable.app. Ouvrez une icône, puis Maskable.app vous permettra d'essayer différentes formes et tailles, et vous pourrez partager l'aperçu avec d'autres membres de votre équipe.

Comment adopter des icônes masquables?

Si vous souhaitez créer une icône masquable basée sur votre icône existante, vous pouvez utiliser le Éditeur Maskable.app. Téléchargez votre icône, ajustez la couleur et la taille, puis exportez l'image.

Une fois que vous avez créé une image d'icône masquable et l'avez testée dans DevTools, vous devrez mettre à jour votre Manifeste d'application Web pour signaler de nouveaux actifs. Le manifeste de l'application Web fournit des informations sur votre application Web dans un fichier JSON et comprend un Icônes formation.

Avec l'inclusion d'icônes masquables, une nouvelle valeur de propriété a été ajoutée pour les ressources d'image répertoriées dans un manifeste d'application Web. Les objectif Le champ indique au navigateur comment son icône doit être utilisée. Par défaut, les icônes auront pour but de "quelconque". Ces icônes seront redimensionnées sur un fond blanc sur Android.

Les icônes masquables doivent avoir un but différent: "masquable". Cela indique qu'une image est destinée à être utilisée avec des masques d'icônes, ce qui vous donne plus de contrôle sur le résultat. De cette façon, vos icônes n'auront pas de fond blanc. Vous pouvez également spécifier plusieurs objectifs séparés par des espaces (par exemple, "tout masquable"), si vous souhaitez que votre icône masquable soit utilisée sans masque sur d'autres appareils.

{
…
"icons": [
…
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "tout masquable" 
}
]
…
}

Avec cela, vous pouvez continuer et créer vos propres icônes masquables, en vous assurant que votre application a l'air bien d'un bord à l'autre (et pour ce que ça vaut, cercle en cercle, ovale à ovale 😄).