Manifeste d'application web (manifest.json)
Un manifeste d'application web est un fichier JSON (généralement manifest.json ou site.webmanifest) lié depuis l'en-tête de la page qui indique aux navigateurs comment votre site doit se comporter une fois installé sur un écran d'accueil ou un lanceur. Il fournit le nom de l'application, l'ensemble d'icônes, les couleurs de thème et de fond, et le mode d'affichage. Sans lui, un navigateur ne proposera pas d'installer le site en tant que PWA.
Ce que déclare le manifeste
Le manifeste est un petit document JSON lié avec <link rel="manifest">. Lorsqu'un utilisateur installe le site, le navigateur le lit pour nommer l'application, choisir une icône, colorer l'écran de démarrage, et décider de la quantité d'interface de navigateur à afficher.
Il ne compte que pour l'installabilité et le comportement sur l'écran d'accueil. Un onglet de navigateur normal n'en a jamais besoin (les balises link de favicon s'en chargent), c'est pourquoi de nombreux sites n'ont aucun manifeste.
Un manifeste minimal
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111111",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Champs clés
| Champ | Rôle |
|---|---|
| name / short_name | Les libellés complet et pour l'écran d'accueil |
| icons | L'ensemble d'icônes d'installation et d'écran d'accueil |
| display | La quantité d'interface de navigateur qu'affiche une application installée |
| theme_color | Colore l'interface de l'OS autour de l'application |
| background_color | La couleur de l'écran de démarrage au lancement |
| start_url | La page sur laquelle l'application installée s'ouvre |
FAQ sur le manifeste d'application web
Ai-je besoin d'un manifeste d'application web ?
Uniquement si vous voulez que le site soit installable en tant que PWA ou contrôler son apparence sur l'écran d'accueil. Un site ordinaire avec un simple favicon n'en a pas besoin.
Quelle est la différence entre manifest.json et site.webmanifest ?
Rien d'autre que le nom de fichier. Les deux sont le même manifeste d'application web ; le navigateur utilise le fichier vers lequel votre <link rel="manifest"> pointe.
Où lier le manifeste ?
Dans l'en-tête de la page, avec <link rel="manifest" href="/site.webmanifest">. Un lien sur chaque page qui doit être installable.