Comment utiliser : Générateur de manifeste PWA
- Saisissez le nom de l’application, un nom court pour l’écran d’accueil (12 caractères maximum), une description et l’URL de démarrage.
- Choisissez le mode d’affichage (standalone pour une fenêtre de type application), ainsi que les couleurs du thème et de l’arrière-plan utilisées pour la barre de titre et l’écran de démarrage.
- Indiquez où se trouvent vos icônes (192 et 512 px, plus une icône maskable), gardez le service worker hors ligne activé et choisissez la stratégie de cache adaptée à votre site.
- Téléchargez le ZIP, placez les fichiers à la racine de votre site, ajoutez les balises
<head>et vérifiez dans Chrome DevTools → Application → Manifest.
Ce qui rend un site installable
- Servi en HTTPS.
- Un manifeste d’application web avec
nameoushort_name,start_url, un modedisplayautre quebrowser, et des icônes d’au moins 192 px et 512 px. - Un manifeste lié dans le
<head>de la page. Chrome n’exige plus de service worker pour l’installation, mais il vous en faut un pour fonctionner hors ligne.
Les stratégies de cache du service worker
| Stratégie | Comment elle répond | Idéale pour |
|---|---|---|
| Network first | Interroge le réseau, bascule sur le cache hors ligne | Pages (toujours utilisée pour le HTML ici) |
| Stale-while-revalidate | Répond immédiatement depuis le cache, met à jour le cache en arrière-plan | CSS, JS, images qui changent de temps en temps |
| Cache first | Utilise le cache et ne va sur le réseau qu’en cas d’absence | Fichiers avec un hash ou une version dans le nom |
Incrémentez la version du cache à chaque déploiement, afin que le nouveau service worker supprime les anciens caches à l’activation. Lorsque rien n’est en cache et que le réseau est coupé, les visiteurs voient offline.html.
Aussi recherché comme : générateur manifest pwa, générateur web app manifest, générateur manifest.json, générateur service worker, générateur pwa, rendre un site installable, service worker hors ligne, générateur webmanifest.
Outils complémentaires : Générateur de manifeste PWA
- Générateur d’icônes d’application — Il vous suffit de déposer une image carrée pour obtenir toutes les tailles d'icônes dont votre application a besoin — un fichier AppIcon.appiconset prêt à l'emploi pour Xcode, des dossiers mipmap Android contenant des icônes adaptatives, l'icône du Play Store et les icônes Web/PWA — le tout dans un seul fichier ZIP.
- Générateur de favicons — Créez un ensemble complet de favicons à partir d'un logo, d'une lettre ou d'un emoji : un fichier favicon.ico en plusieurs tailles, une icône Apple Touch, des icônes Android/PWA, un Webclip Webflow, le manifeste Web et les balises HTML à insérer.
- Générateur de balises meta — Remplissez un seul formulaire pour obtenir un <head> complet et valide (titre, description, canonical, robots, Open Graph, cartes X/Twitter, couleur de thème et icônes), avec aperçus en direct et code spécifique à Webflow.
- Générateur de fichiers deep link — Créez les deux fichiers qui permettent aux liens de votre site d'ouvrir votre application : apple-app-site-association pour les Universal Links iOS et assetlinks.json pour les App Links Android.
Questions fréquentes
Faut-il utiliser manifest.json ou manifest.webmanifest ?
Les deux fonctionnent. L’extension recommandée par la spécification est .webmanifest (servie avec application/manifest+json), mais .json convient aussi, à condition que pointe vers ce fichier.
Qu’est-ce qu’une icône maskable ?
Une icône avec une marge supplémentaire (une zone de sécurité au centre, sur 80 %) qu’Android peut recadrer en cercle, en squircle ou dans une autre forme sans couper votre logo.
Pourquoi ma PWA n’affiche-t-elle pas le bouton d’installation ?
Vérifiez les erreurs dans Chrome DevTools → Application → Manifest : il s’agit en général d’une icône 192 ou 512 px manquante, d’un start_url ou scope incorrect, d’un display réglé sur browser, ou d’une page non servie en HTTPS.
Comment mettre à jour une PWA après un déploiement ?
Modifiez la version du cache dans sw.js. Le navigateur installe le nouveau service worker, qui supprime les anciens caches et prend le contrôle (skipWaiting et clients.claim). Les utilisateurs reçoivent ainsi les nouveaux fichiers à leur prochaine visite.
Puis-je installer Générateur de manifeste PWA en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de manifeste PWA est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.