Rendre sa PWA installable : le fichier Web App Manifest

L’un des grands avantages des Progressive Web Apps (PWA) est leur capacité à être installées sur l’appareil de l’utilisateur, comme une application native. Cette fonctionnalité renforce la présence de l’application, améliore l’engagement et permet une expérience plus fluide, sans passer par un store d’applications.
Pour rendre cela possible, le navigateur a besoin d’un ensemble d’informations sur votre application : son nom, ses icônes, la page d’accueil à charger, les couleurs à utiliser, etc. C’est le rôle du Web App Manifest, un simple fichier JSON qui sert de carte d’identité à votre PWA.
Dans cet article, nous allons voir en détail ce qu’est ce fichier manifest, comment le configurer, l’intégrer dans votre site, et quelles sont les conditions à remplir pour que votre application devienne installable. C’est une étape essentielle dans la transformation de votre site web en application moderne, accessible et engageante.
I. Critères pour rendre l’application installable
Pour qu’un navigateur moderne propose à l’utilisateur d’installer votre application web comme une Progressive Web App, certaines conditions doivent impérativement être réunies. Ces critères garantissent que l’application offre un minimum d’expérience utilisateur similaire à celle d’une app native.
1. L’application doit être servie via HTTPS
La sécurité est un fondement essentiel des PWA. Le protocole HTTPS est obligatoire pour garantir l’intégrité des données échangées, mais aussi pour activer des fonctionnalités comme le Service Worker, le cache, les notifications push, et l’installation. Toute tentative de chargement d’une PWA en HTTP bloquera l’accès à ces capacités avancées.
2. Un fichier Web App Manifest valide et bien lié
Le fichier manifest.webmanifest doit être présent à la racine du projet (ou accessible via une URL relative ou absolue) et correctement référencé dans le
du document HTML. Ce fichier doit contenir les propriétés essentielles, notamment name ou short_name, icons, start_url, et display. Sans ce manifest, le navigateur ne pourra pas identifier votre application comme installable.3. Un Service Worker actif
Le Service Worker est un script JavaScript qui agit comme un proxy entre votre application et le réseau. Même s’il n’est pas encore utilisé pour la mise en cache, sa présence est obligatoire pour rendre l’installation possible. Il doit être correctement enregistré, activé, et ne pas contenir d’erreurs critiques. Le simple fait d’enregistrer un Service Worker vide suffit à remplir ce critère minimal, bien que l’on recommande vivement de l’utiliser pour gérer les ressources en cache dès cette étape.
4. Une interaction utilisateur préalable (sur certains navigateurs)
Sur Chrome et d’autres navigateurs basés sur Chromium, le prompt d’installation (« Ajouter à l’écran d’accueil ») n’apparaît que si l’utilisateur a interagi avec le site, par exemple, s’il a visité plusieurs pages ou passé un certain temps sur l’application. Ce comportement vise à s’assurer que l’installation est pertinente et souhaitée.
La gestion fine de l’événement beforeinstallprompt
, qui permet de personnaliser l’expérience d’installation, fera l’objet d’un article dédié dans cette série.
II. Qu’est-ce que le Web App Manifest ?
Le Web App Manifest est un fichier au format JSON qui sert de carte d’identité à votre application web lorsqu’elle est présentée comme une Progressive Web App. Il fournit au navigateur les informations nécessaires pour permettre l’installation de l’application, contrôler son apparence sur l’écran d’accueil, et définir son comportement lors de son lancement.
Ce fichier, généralement nommé manifest.webmanifest, est lu par le navigateur dès que la page est chargée. Il contient un ensemble de propriétés qui décrivent comment l’application doit être affichée et lancée lorsqu’elle est installée.
1. Propriétés principales du manifest
Voici les propriétés les plus couramment utilisées :
-
name
: le nom complet de l’application, affiché dans l’interface d’installation ou lors du lancement. -
short_name
: un nom abrégé, utilisé notamment sous l’icône de l’application sur l’écran d’accueil. -
start_url
: l’URL que le navigateur doit ouvrir lorsque l’utilisateur lance l’application depuis son appareil. Cette URL est souvent/
ou/index.html
. -
icons
: une liste d’icônes à différentes résolutions, utilisées pour représenter l’application dans les différents contextes (écran d’accueil, tâches récentes, splash screen, etc.). Les tailles les plus recommandées sont192x192
et512x512
.
Pour en savoir plus sur les bonnes pratiques liées aux icônes (formats, résolutions, compatibilité), consultez l'article :
Icônes Web en 2025 : Touch Icons, Adaptive Icons & manifest.json. -
display
: détermine la façon dont l’application sera affichée une fois lancée. Les valeurs possibles sont :standalone
: l'application s'ouvre sans barre d'adresse ni interface du navigateur, ressemblant à une app native. C’est la valeur la plus couramment utilisée pour une PWA.fullscreen
: l'application occupe tout l’écran, sans aucune UI du navigateur ou du système. Recommandée pour les jeux ou expériences immersives.minimal-ui
: affiche une interface très réduite, avec une barre de navigation minimale (bouton retour, rechargement).browser
: comportement par défaut, l'application s’ouvre dans un onglet classique du navigateur avec toute l’interface visible.
-
theme_color
: la couleur principale utilisée par le navigateur pour styliser l’interface autour de l’application (barre d’adresse, en-tête système, multitâche, etc.). Cela améliore l’intégration visuelle avec le reste du système.. -
background_color
: la couleur de fond de l’écran de démarrage (splash screen) qui apparaît pendant que l'application se charge. Elle peut être la même quetheme_color
, mais pas nécessairement.
Ces propriétés permettent de créer une expérience cohérente et personnalisée, donnant à l’utilisateur l’impression d’utiliser une application native, tout en restant dans un environnement web.
2. Exemple d’un fichier manifest.webmanifest
{
"name": "Ma Super Application",
"short_name": "SuperApp",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0d47a1",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
3. Intégration du manifest dans votre application
Pour que le navigateur puisse détecter le fichier manifest, il faut le
lier dans le head
de votre document HTML principal :
<link rel="manifest" href="/manifest.webmanifest">
Assurez-vous aussi que l’application est servie via HTTPS, car les fonctionnalités PWA comme l'installation ne sont actives que sur des connexions sécurisées.
III. Tester et valider le manifest
Une fois le fichier manifest.webmanifest rédigé et lié à votre page HTML, il est essentiel de s’assurer qu’il est bien pris en compte par le navigateur et qu’il permet effectivement à votre application d’être installable. Un manifest mal configuré peut empêcher l’installation de la PWA, ou provoquer un affichage incorrect sur l’écran d’accueil.
1. Utiliser les outils de développement du navigateur
Les navigateurs modernes comme Google Chrome ou Microsoft Edge disposent d’un onglet dédié aux Progressive Web Apps dans leurs outils de développement.
- Ouvrez votre site dans Chrome.
- Faites clic droit > Inspecter, puis allez dans l’onglet Application.
- Dans le panneau latéral, vous trouverez une section Manifest. Elle affiche le contenu du fichier tel qu’il est perçu par le navigateur.
- Vous pouvez y vérifier la présence des champs clés (name, icons, start_url, etc.), voir les icônes, et tester l’apparence du splash screen.
Un indicateur de validation vous informera également si le manifest est bien détecté et fonctionnel.
2. Vérifier les erreurs dans la console
Si le manifest est mal structuré (erreur de syntaxe JSON, icône manquante, champ obligatoire absent), le navigateur l’ignorera sans proposer l’installation. Ces erreurs sont généralement signalées dans la console des outils de développement. Il est donc recommandé de toujours vérifier la console après modification du manifest.
3. Auditer l’application avec Lighthouse
Lighthouse est un outil d’audit intégré à Chrome qui permet de tester la performance, l’accessibilité, la compatibilité PWA, et les bonnes pratiques d’un site web.
- Depuis l’onglet Lighthouse, générez un audit en sélectionnant « Progressive Web App ».
- Lighthouse analysera votre manifest, la présence d’un Service Worker, et d’autres critères d’installabilité.
- Vous obtiendrez un rapport détaillé avec des recommandations concrètes pour améliorer la compatibilité de votre PWA.
4. Tester sur différents appareils
Même si le manifest fonctionne sur desktop, il est important de le tester également sur des appareils mobiles, Android notamment, qui propose une expérience d’installation complète (via Chrome). Sur iOS, bien que les PWA soient supportées de manière plus limitée, un manifest bien configuré permettra tout de même l’ajout à l’écran d’accueil via Safari.
IV. Conclusion
Le Web App Manifest est un élément clé pour faire franchir à votre application web une étape vers le monde des apps installables. Grâce à ce simple fichier JSON, vous offrez à vos utilisateurs la possibilité d’ajouter votre application à leur écran d’accueil, de la lancer en plein écran, et de bénéficier d’une expérience visuelle plus cohérente avec leur environnement natif.
Mais une application installée n’a de sens que si elle reste accessible à tout moment, y compris hors connexion. Pour cela, il est temps d’aborder un autre pilier fondamental des Progressive Web Apps : le Service Worker.
Dans le prochain article, nous découvrirons comment ce script JavaScript en arrière-plan vous permet d’intercepter les requêtes, de gérer intelligemment le cache, et surtout de rendre votre application pleinement fonctionnelle hors-ligne.
Le Service Worker et le mode hors-ligne
Le guide complet
-
Mai 2025 HTML JS JSON 📱 PWA 🧩 UX ♿ Accessibilité 🔍 SEO
0. Guide : Progressive Web Apps, Créez des apps web modernes, installables et hors-ligne
-
📱 PWA 🧩 UX ♿ Accessibilité 🔍 SEO
-
HTML JSON 📱 PWA 🧩 UX
-
JS 📱 PWA 🧩 UX ♿ Accessibilité

browserux.css est un fichier de base CSS pensé comme une alternative moderne aux resets classiques et à Normalize.css, axé sur l'expérience utilisateur et l'accessibilité. Il pose des fondations accessibles, cohérentes et adaptées aux usages actuels du web : browserux.css
À propos
Ce blog a été conçu comme une extension naturelle des projets de l'écosystème BrowserUX.
Il a pour objectif de fournir des ressources complémentaires, des astuces ciblées et des explications détaillées autour des choix techniques, des bonnes pratiques et des principes d’accessibilité qui structurent ces outils.
Chaque article ou astuce vient éclairer un aspect précis du front-end moderne (CSS, accessibilité, UX, performance…), avec une volonté claire : expliquer le pourquoi derrière chaque règle pour encourager une intégration plus réfléchie et durable dans vos projets.