Ce dont vous avez besoin
Un site servi en HTTPS, un logo carré pour fabriquer les icônes et l'accès à l'en-tête de la page.
Exemple
Ce manifeste réussit toutes les vérifications d'installation du générateur :
{
"name": "Example App",
"short_name": "Example",
"description": "A small example application",
"start_url": "/",
"display": "standalone",
"theme_color": "#0d6efd",
"background_color": "#ffffff",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icons/maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Et les balises à placer dans l'en-tête de la page :
<link rel="manifest" href="https://example.com/manifest.webmanifest">
<meta name="theme-color" content="#0d6efd">
<link rel="apple-touch-icon" href="https://example.com/icons/icon-192.png">
Pièges courants
- Les chemins d'icônes relatifs se résolvent par rapport à l'URL du manifeste, pas de la page.
- L'
start_urldoit se charger sans redirection de connexion, sinon l'application installée s'ouvre sur un écran vide. - Utilisez
display: standalonepour une fenêtre d'allure applicative ;browsergarde l'interface normale du navigateur et n'est pas installable à lui seul. - iOS utilise
apple-touch-iconet son propre parcours d'ajout à l'écran d'accueil ; conservez donc aussi ce lien.