PWA manifest
app/manifest.ts auto-généré — affiche bouton 'Installer l'app' sur Chrome/mobile, basé sur appName du site config.
Le boilerplate inclut un Web App Manifest minimaliste qui rend l'application installable :
- Sur Chrome desktop : bouton "Installer" dans la barre d'URL
- Sur Android : "Ajouter à l'écran d'accueil"
- Sur iOS Safari : ajoutable via le menu partage
Config
app/manifest.ts (Next.js convention) — généré côté serveur, lit
getCachedSiteConfig() pour appName. La couleur de thème est codée
en dur (#18181b) — change-la pour matcher ta brand.
Icônes à fournir
Trois fichiers à mettre dans public/ avant de ship :
| Fichier | Taille | Usage |
|---|---|---|
icon-192.png | 192×192 | écran d'accueil mobile (small) |
icon-512.png | 512×512 | écran d'accueil mobile (large), splash |
icon-512-maskable.png | 512×512 | safe area pour iOS / Android adaptive |
Le maskable doit avoir un fond plein (pas transparent) avec le logo dans les ~80% centraux — le reste peut être croppé en cercle/squircle par l'OS. Outil : maskable.app.
Tester
chrome://inspect → ton onglet → Application → ManifestDoit afficher tes icônes + un check vert "Installable".
Tu peux aussi tester via Lighthouse → catégorie PWA.
Limitations
Le manifest seul te donne l'installation. Pour aller plus loin :
- Offline → service worker (
next-pwaouserwist). Pas inclus par défaut, ça change la donne sur le caching et le DX. - Push offline → déjà géré par OneSignal côté navigateur.
- Background sync → service worker requis.
Pour 90% des SaaS, le manifest seul suffit. N'ajoute le SW que si tu as un vrai use-case offline (édition long-form, terrain).
Theme color
#18181b (zinc-900) par défaut. Si tu veux que ça match ton
siteConfig.colorTheme, dynamise-le dans manifest.ts — mais
attention, le manifest est cache long, le re-générer n'est pas
instantané pour les users déjà installés.