Comment utiliser : PWA Manifest Generator
- Enter the app name, a short name for the home screen (12 characters or fewer), a description and the start URL.
- Choose the display mode — standalone for an app-like window — and the theme and background colors used for the title bar and splash screen.
- Set where your icons live (192 and 512 px, plus a maskable one) and keep the offline service worker on, with the caching strategy that fits your site.
- Download the ZIP, put the files in your site root, add the
<head>tags and check Chrome DevTools → Application → Manifest.
What makes a site installable
- Served over HTTPS.
- A web app manifest with
nameorshort_name,start_url, adisplaymode other thanbrowser, and icons of at least 192 px and 512 px. - A linked manifest in the page’s
<head>. Chrome no longer requires a service worker to install, but you need one to work offline.
The service worker’s caching strategies
| Strategy | How it answers | Best for |
|---|---|---|
| Network first | Tries the network, falls back to the cache when offline | Pages (always used for HTML here) |
| Stale-while-revalidate | Answers from the cache instantly, updates the cache in the background | CSS, JS, images that change now and then |
| Cache first | Uses the cache and only goes to the network when missing | Files with a hash or version in the name |
Bump the cache version when you deploy, so the new service worker clears old caches on activation. When nothing is cached and the network is down, visitors see offline.html.
Aussi recherché comme : web app manifest generator, manifest.json generator, service worker generator, pwa generator, make website installable, offline service worker, webmanifest generator.
Outils complémentaires : PWA Manifest Generator
- 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.
- Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.
- Deep Link File Generator — Create the two files that let links to your website open your app — apple-app-site-association for iOS Universal Links and assetlinks.json for Android App Links — or paste existing files to check them.
Questions fréquentes
Is it manifest.json or manifest.webmanifest?
Both work. The spec’s recommended extension is .webmanifest (served as application/manifest+json); .json is fine too as long as the points to it.
What is a maskable icon?
An icon with extra padding (a safe zone in the middle 80%) that Android can crop into a circle, squircle or other shape without cutting off your logo.
Why does my PWA not show the install button?
Check Chrome DevTools → Application → Manifest for errors: usually a missing 192 or 512 px icon, a wrong start_url or scope, display set to browser, or the page not being served over HTTPS.
How do I update a PWA after a deploy?
Change the cache version in sw.js. The browser installs the new service worker, which deletes old caches and takes over (skipWaiting and clients.claim), so users get the new files on their next visit.
Puis-je installer PWA Manifest Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. PWA Manifest Generator 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.