PWA Mobile — Boilerplate Docs

Vue d'ensemble

Le boilerplate est une PWA (Progressive Web App) installable sur mobile et desktop. Il inclut un Service Worker, un manifest complet, les meta tags Apple/Android et une page offline personnalisée.

Fichier	Rôle
`public/site.webmanifest`	Manifest PWA (nom, icônes, couleurs, display standalone)
`public/sw.js`	Service Worker — cache assets + offline fallback
`public/offline.html`	Page affichée hors connexion (thème adaptatif)
`templates/base.html.twig`	Meta tags PWA (theme-color, apple-mobile-web-app-*)
`assets/app.js`	Registration du Service Worker au chargement

Manifest PWA

Le fichier public/site.webmanifest configure l'application installable. Personnalisez name, short_name et theme_color selon votre projet.

{
  "name": "Symfony SaaS Boilerplate",
  "short_name": "SaaS App",
  "display": "standalone",
  "theme_color": "#0c0c10",
  "background_color": "#0c0c10",
  "start_url": "/",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
    { "src": "/android-chrome-512x512.png",  "sizes": "512x512",  "type": "image/png", "purpose": "any maskable" }
  ]
}

Pour remplacer les icônes, générez-les sur realfavicongenerator.net et déposez les fichiers PNG dans public/.

Service Worker

Le SW public/sw.js applique deux stratégies :

Requête	Stratégie	Fallback
Assets statiques `/assets/*`, images, fonts	Cache-first	408 si réseau inaccessible
Pages HTML	Network-first	Cache puis `/offline.html`
`/admin`, `/api`, `/_`	Ignoré (réseau direct)	—

La page /offline.html est pré-cachée à l'installation du SW. Elle respecte le thème sombre/clair de l'utilisateur via localStorage.

Meta tags mobiles

Les meta tags suivants sont ajoutés dans templates/base.html.twig :

<meta name="theme-color" content="#0c0c10" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f6f6fb" media="(prefers-color-scheme: light)">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="SaaS App">
<meta name="format-detection" content="telephone=no">

theme-color s'adapte au thème système grâce aux deux valeurs media. Sur iOS, black-translucent rend la barre de statut transparente pour une immersion totale.

Personnaliser pour votre projet

Remplacez name / short_name dans site.webmanifest et le meta apple-mobile-web-app-title
Adaptez theme_color / background_color à votre palette (voir assets/styles/theme.scss)
Générez vos icônes sur realfavicongenerator.net et replacez les PNG dans public/
Incrémentez CACHE_VERSION dans sw.js pour invalider les caches après un déploiement majeur
Pour un cache plus agressif, ajoutez des URLs spécifiques dans le tableau PRECACHE_URLS de sw.js