Guide du manifeste d'application web : un vrai manifest.json, champ par champ
Le manifeste d'application web est un petit fichier JSON qui indique au système d'exploitation comment installer votre site : son nom, ses icônes et ses couleurs. En voici un vrai, champ par champ.
À quoi sert le manifeste
Le manifeste est ce qui transforme un site web en quelque chose que le système d'exploitation peut installer. Lorsqu'un utilisateur ajoute votre site à un écran d'accueil, le navigateur lit le manifeste pour déterminer l'icône, le nom en dessous, l'écran de démarrage, et si l'application s'ouvre avec ou sans l'habillage du navigateur.
C'est du JSON simple. Il vous faut un seul fichier, lié depuis chaque page, plus les PNG d'icône qu'il pointe. Chaque champ ci-dessous correspond à quelque chose que l'utilisateur voit.
Les champs qui comptent
| Champ | Ce qu'il contrôle |
|---|---|
| name | Le nom complet de l'application, affiché sur l'invite d'installation et l'écran de démarrage |
| short_name | Le nom sous l'icône de l'écran d'accueil, là où la place est limitée |
| icons | Le jeu d'icônes. Incluez des PNG en 192 et 512, plus un marqué maskable pour les formes Android |
| theme_color | La couleur de l'interface du système autour de l'application, comme la barre d'état |
| background_color | Le fond de l'écran de démarrage affiché pendant le chargement de l'application |
| display | Comment l'application s'ouvre. standalone masque l'habillage du navigateur pour un rendu natif |
| start_url | La page sur laquelle l'application s'ouvre au lancement depuis l'écran d'accueil |
Un manifest.json complet
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}Deux icônes standard et une maskable, pour qu'Android puisse recadrer à n'importe quelle forme de lanceur sans rogner votre logo.
Reliez-le à vos pages
<link rel="manifest" href="/manifest.json">Placez ceci dans le <head> de chaque page. Sans la balise link, le fichier existe mais rien ne le lit.
Questions fréquentes
Qu'est-ce qu'un manifeste d'application web ?
Un petit fichier JSON qui indique au navigateur et au système d'exploitation comment installer votre site : son nom, ses icônes, ses couleurs, et la façon dont il doit s'ouvrir. C'est ce qui rend une page installable sur un écran d'accueil.
Quelle est la différence entre theme_color et background_color ?
theme_color teinte l'interface du système autour de l'application, comme la barre d'état. background_color remplit l'écran de démarrage affiché pendant le chargement de l'application. Ce sont souvent la même valeur, mais ils contrôlent des surfaces différentes.
Où placer manifest.json ?
Servez-le depuis un chemin stable comme la racine de votre site, puis référencez-le avec <link rel="manifest" href="/manifest.json">. Les icônes qu'il liste doivent être accessibles depuis les chemins indiqués dans les champs src.
Ai-je besoin d'un manifeste pour un site web normal ?
Uniquement si vous voulez des invites d'installation et des icônes d'écran d'accueil. Un simple site informatif fonctionne très bien sans, mais tout site que les utilisateurs pourraient enregistrer sur un téléphone en tire profit.