Qu'est-ce que manifest.json ?
Un guide simple sur les web application manifests et comment ils font tourner les progressive web apps.
Comprendre le manifest
Un web application manifest, défini dans la spécification W3C Web Application Manifest, est un fichier texte JSON qui fournit des informations sur une application web.
L'usage le plus courant d'un web application manifest est de fournir les informations dont le navigateur a besoin pour installer une progressive web app (PWA) sur un appareil, comme le nom et l'icône de l'app.
Un web application manifest contient un unique objet JSON dont les clés de premier niveau sont appelées members.
Pourquoi manifest.json compte
| Avantage | Ce qu'il fait |
|---|---|
| Installation de PWA | Le manifest permet aux navigateurs de proposer aux utilisateurs d'installer votre web app sur leur appareil, ce qui la fait ressembler à une application native. |
| Références d'icônes | Le manifest indique aux navigateurs quels fichiers d'icône utiliser selon les contextes : écrans d'accueil, splash screens et launchers d'app. |
| Métadonnées de l'app | Il fournit des informations essentielles comme le nom de votre app, les couleurs de thème, le mode d'affichage et l'URL de démarrage, pour une expérience cohérente. |
Le défi des icônes
Créer un manifest.json complet exige de générer et de référencer des icônes en plusieurs tailles. Chaque taille remplit un rôle précis selon les plateformes et les contextes.
À quoi sert chaque taille
| Taille | Rôle |
|---|---|
| 192x192 | Icônes standard de l'écran d'accueil Android |
| 512x512 | Splash screens haute résolution et Android |
| 96x96 | Raccourcis du bureau et Google TV |
| 32x32 | Onglets du navigateur et favoris |
| 16x16 | Barre d'adresse et prise en charge des navigateurs historiques |
Les mêmes tailles, à l'échelle réelle
Comment Favicon Tools aide
Créer manuellement toutes les tailles d'icône requises et maintenir un fichier manifest.json peut être long et source d'erreurs. Favicon Tools automatise le processus.
Quand vous utilisez Favicon Tools pour générer vos favicons, nous écrivons automatiquement un manifest.json complet qui référence toutes les tailles d'icône dont vous avez besoin :
Ce que couvre le manifest généré
| Groupe d'icônes | Tailles | Ce qu'il couvre |
|---|---|---|
| Icônes Android | 192x192, 512x512 | Raccourcis de l'écran d'accueil et splash screens |
| Favicons standard | 16x16, 32x32, 96x96 | Onglets du navigateur et favoris |
| Apple touch icons | Toutes les tailles requises | Appareils iOS |
| Tuiles Windows | Tailles de tuile | Intégration au menu Démarrer de Microsoft |
Exemple de manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}Ce manifest inclut toutes les références d'icône essentielles nécessaires à l'installation de la PWA et à un affichage correct sur différentes plateformes. Favicon Tools le génère automatiquement avec tous les fichiers d'icône référencés.
Génération en un clic
Importez votre image source une fois, et Favicon Tools génère toutes les tailles d'icône dont vous avez besoin, plus un fichier manifest.json complet, le tout dans un seul package téléchargeable.
Pas besoin de redimensionner des images à la main, de créer plusieurs fichiers ou d'écrire du JSON manuellement. Tout est prêt à déposer dans votre projet.
Toujours à jour
Quand vous régénérez vos favicons après un rebranding ou une mise à jour de design, le manifest.json est mis à jour avec les bonnes références d'icône.
Cela évite que votre manifest se désynchronise de vos vrais fichiers d'icône, ce qui est justement ce qui produit des références cassées et des icônes manquantes.