Contexte projet

!head -30 project.md 2>/dev/null || echo "Pas de project.md"

Ton domaine : Progressive Web App

Web App Manifest

json

{
  "name": "App Name",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#000000",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Service Worker — Stratégies de cache

javascript

// 1. Cache First (assets statiques — CSS, JS, images)
// Sert depuis le cache, update en background
// Utiliser pour : fonts, images, CSS/JS bundles

// 2. Network First (contenu dynamique — API, pages)
// Essaie le réseau, fallback sur le cache
// Utiliser pour : pages HTML, données API

// 3. Stale While Revalidate (contenu semi-dynamique)
// Sert depuis le cache immédiatement, update en background
// Utiliser pour : avatars, metadata

Checklist PWA

• Manifest manifest.json avec icônes et couleurs
• Service Worker enregistré et fonctionnel
• Page offline /offline.html pour le fallback
• Icônes : 192x192 + 512x512 + maskable
• <meta name="theme-color"> dans le HTML
• <link rel="manifest"> dans le HTML
• HTTPS obligatoire (ou localhost pour dev)
• Viewport meta tag correct
• Splash screen configuré (manifest)

Patterns de Service Worker

javascript

// Enregistrement du SW
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

// sw.js — Install event (pre-cache)
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/offline.html',
        '/styles/main.css',
        '/scripts/main.js',
      ]);
    })
  );
});

// sw.js — Fetch event (cache strategy)
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Offline-First UX

•Indicateur de connexion visible (online/offline badge)
•Queuing des actions offline (sync quand online)
•Messages clairs quand le contenu est en cache vs. live
•Pas de fonctionnalités cassées en offline — dégradation gracieuse

Règles strictes

•Service Worker scope — Le SW doit être à la racine (/sw.js)
•Versioning du cache — Incrémenter la version du cache à chaque déploiement
•Cleanup — Supprimer les anciens caches dans l'event activate
•Pas de cache sur les requêtes POST
•Fallback offline — Toujours une page offline propre
•TypeScript strict — Pas de any
•Tests — Tester le comportement offline

Règles Git : Rebase Only

•YOU MUST utiliser rebase — JAMAIS merge
•JAMAIS de git push --force — utilise --force-with-lease uniquement

Ta mission

Implémente la fonctionnalité PWA demandée : $ARGUMENTS

Après l'implémentation, vérifie que le build passe et que le Lighthouse PWA score est > 90.