Validateur de Web App Manifest (manifest.json)
Collez le contenu de votre manifest.json pour vérifier s'il répond aux conditions d'installation d'une PWA. Vérifie les champs requis comme name, start_url, display et icons, et signale l'absence d'icônes maskable dans une liste claire.
Astuces
- Il est recommandé de renseigner à la fois name et short_name. Sans short_name, le libellé affiché sous l'icône de l'écran d'accueil est tronqué mécaniquement à partir de name, ce qui peut donner un rendu peu élégant.
- Sans icône marquée purpose: "maskable", certains appareils Android peuvent rogner l'icône de façon inattendue ou laisser transparaître la couleur de fond. Il suffit généralement d'ajouter une entrée maskable au tableau icons existant pour corriger cela.
- Incluez au moins une icône de 192x192 ou plus dans icons, et idéalement une autre de 512x512 ou plus. La première sert à l'icône de l'écran d'accueil, la seconde à l'écran de démarrage (splash screen).
- Les critères d'installabilité PWA réellement appliqués par des navigateurs comme Chrome peuvent évoluer avec le temps ; considérez donc les résultats de cet outil comme indicatifs plutôt qu'une garantie — il est utile de vérifier également avec le panneau Application de Chrome DevTools.
- Un start_url relatif (par exemple "/?source=pwa") fonctionne très bien. L'ajout d'un paramètre de requête permet de distinguer les lancements depuis la PWA des visites classiques dans le navigateur au sein de vos statistiques.
Questions fréquentes
Anecdote — La relation entre le Web App Manifest et les PWA
Le Web App Manifest est une spécification au format JSON définie par le W3C, qui déclare les informations nécessaires pour ajouter un site web à l'écran d'accueil et l'installer comme une application native : nom de l'application, icônes, mode d'affichage au lancement, couleur du thème, etc. Le terme PWA (Progressive Web App) a lui-même été inventé par des ingénieurs de Google en 2015, et manifest.json — avec le Service Worker qui gère le fonctionnement hors ligne — constitue l'un des deux éléments techniques centraux de ce concept.
Si manifest.json n'est pas configuré correctement, le navigateur ne reconnaîtra pas le site comme installable et n'affichera pas d'invite d'installation (comme la bannière "Installer" de Chrome). Des problèmes tels qu'une résolution d'icône insuffisante ou une valeur de display mal orthographiée sont faciles à manquer, car le JSON reste syntaxiquement valide — ils passent souvent inaperçus jusqu'à ce que quelqu'un tente réellement d'installer l'application.
Les icônes maskable (purpose: "maskable") constituent un ajout relativement récent, introduit vers 2019 pour prendre en charge les "icônes adaptatives" d'Android. Les icônes classiques sont masquées en cercle, en carré arrondi ou selon une autre forme selon l'appareil, si bien qu'une icône sans marge intégrée peut se retrouver avec une partie de son logo rognée. Une icône maskable doit être conçue en tenant compte d'une zone de sécurité, et elle est généralement fournie comme une entrée distincte des icônes classiques.
Cet outil se concentre sur la validation statique du seul manifest.json — il ne vérifie pas les autres facteurs qui influent sur l'installabilité réelle, comme l'enregistrement d'un Service Worker ou la diffusion du site en HTTPS. Pour une confirmation finale en production, il est conseillé d'utiliser également les outils de développement de votre navigateur (par exemple le panneau Application de Chrome DevTools).