React Progressive Web App (PWA)

Ce qu'il fait

Fournit des conseils étape par étape et des scripts pour convertir ou créer des applications React + Vite en Progressive Web Apps. Couvre la génération du manifest, la configuration de vite-plugin-pwa, les stratégies de service worker (generateSW vs injectManifest), les pages de repli hors ligne, les invites d'installation, les abonnements push et les stratégies de mise en cache adaptées aux actifs et aux réponses d'API. Comprend des composants d'exemple, des hooks et des scripts d'aide Deno pour générer des icônes et des manifests.

Quand l'utiliser

Utilisez cette compétence lorsqu'un utilisateur demande de créer ou de convertir une application React en une PWA installable/capable du mode hors ligne, d'ajouter des service workers, de configurer la mise en cache runtime de workbox, d'implémenter l'UX d'installation/mise à jour, ou d'activer les notifications push. Non destiné aux frameworks rendus côté serveur (préférez next-pwa pour Next.js) ou aux sites statiques très petits sans besoin de mode hors ligne.

Ce qui est inclus

• Scripts : generate-manifest.ts, generate-icons.ts, generate-sw-config.ts, audit-pwa.ts (scripts deno)
• Références : documentation détaillée sur les stratégies de mise en cache, les notifications push, les tests de PWA
• Instructions : Étapes de démarrage rapide, exemples complets de configuration Vite, échantillons de mise en cache de service worker, composants de repli hors ligne et de bouton d'installation, flux d'abonnement push et conseils de dépannage courants.

Agents compatibles

Il s'agit de conseils de mise en œuvre et de développement pour les agents orientés développeurs avec des capacités d'exécution de code ou de CLI (Copilot/Codex/Claude Code/assistants capables de coder) et suppose un accès Node/Deno/CLI.