web-dev-qa-db-fra.com

Quelles tailles d'icônes sont requises pour les applications Web progressives à partir du premier trimestre 2018?

Quelles icônes et tailles d'applications sont nécessaires pour une application Web progressive (PWA)? Par exemple, devrais-je inclure des icônes Apple si Safari ne prend pas en charge les PWA?

Cela semble être un besoin commun parmi les développeurs, mais pour le moment, je ne suis pas certain qu’il existe une spécification ou des directives officielles à cet effet.

progressive-web-apps
6
Dan Sorensen

Selon Google Developers

les icônes doivent inclure des icônes de taille 192px et 512px

3
Tanmay

Si vous souhaitez inclure un ensemble complet d’icônes pour Android:

icon-72x72
icon-96x96
icon-128x128
icon-144x144
icon-152x152
icon-192x192
icon-384x384
icon-512x512

Il existe des outils utiles tels que https://app-manifest.firebaseapp.com/ , pour créer des icônes.

Pour iOS, vous aurez besoin de:

icon-120x120
icon-180x180

Avec un fond carré (ne peut pas être un fond transparent) . Un bon référentiel pour les références sur https://github.com/gokulkrishh/awesome-meta-and-manifest }

2
yaircarreno

Selon la spécification du manifeste d'application du W3C (World Wide Web Consortium) pour les applications Web progressives ( 8,7 icones member ):

  • Vous pouvez déclarer plusieurs icônes de différents formats et tailles
  • La spécification W3C n'identifie pas les tailles requises ou recommandées, mais vous permet de spécifier des attributs (taille, format, chemin d'accès) pour les icônes que vous fournissez afin de permettre à l'agent utilisateur de choisir la plus appropriée parmi ces règles:
    • L'agent d'utilisateur doit utiliser l'icône LAST déclarée appropriée pour son utilisation.
    • Il faut se replier sur le prochain choix le plus approprié si le premier essayé échoue pour une raison quelconque.

MDN Web Docs ne répertorie pas les formats ni les formats requis, mais ajoute:

  • La valeur tailles est une "liste de dimensions séparée par des espaces" pour une icône

    • Exemple: "72x72 96x96"

  • La valeur type est facultative, mais aide l'agent utilisateur à sélectionner l'icône la plus appropriée pour son utilisation.

À l'aide des règles ci-dessus, l'application peut fournir des conditions d'utilisation de certaines icônes, telles que forcer le fichier PNG pour une résolution spécifique, revenir au format SVG pour toute taille non spécifiée et permettre à l'agent utilisateur de sélectionner le meilleur choix. L'avantage de ce système est la compatibilité en aval avec les agents utilisateurs qui n'ont pas encore été annoncés.

Icônes de manifeste Exemple: (d'après les spécifications du W3C citées ci-dessus)

{
  "icons": [
    {
      "src": "assets/brand_small.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon/brand.ico",
      "sizes": "96x96 128x128 256x256"
    },
    {
      "src": "icon/brand_large.svg",
      "sizes": "257x257"
    }]
}
1
Dan Sorensen