Web et PWA
Next.js App Router, React 19 et la stratégie d'application web progressive.
Le client web vit dans apps/web. Il est bâti sur Next.js avec l'App Router, React 19 et le React Compiler, et il vise le statut d'application web progressive.
Pourquoi une PWA d'abord
Une PWA offre une seule base de code, installable sur mobile via l'ajout à l'écran d'accueil, avec des notifications push, sans passer par l'App Store ni le Play Store. Pour une application sensible, cela évite aussi la modération des stores. C'est le meilleur rapport effort sur portée pour un projet porté par une personne.
État réel contre état prévu
Il faut être honnête sur ce qui existe aujourd'hui.
| Élément | État |
|---|---|
| Manifest et icônes | Présent (apps/web/src/app/manifest.ts) |
| Installable sur l'écran d'accueil | Oui, via le manifest |
| Service worker | Prévu, via Serwist |
| Web Push | Prévu, via le service worker et des clés VAPID |
| Mode hors-ligne | Prévu |
Aujourd'hui, la couche PWA se limite au manifest. L'addon PWA du scaffold ne pose pas de service worker. La vraie capacité (notifications, hors-ligne) reste à câbler avec Serwist, le successeur maintenu de next-pwa.
Web Push sans store
Une fois le service worker en place, les notifications passent par la Web Push API et des clés VAPID. C'est un atout majeur pour un réseau social : notifier un utilisateur sans dépendre d'un store ni d'un service tiers.
Le piège iOS
Le comportement d'iOS impose une attention particulière.
- Le Web Push ne fonctionne sur iOS que depuis la version 16.4.
- Il ne fonctionne que si la PWA a été ajoutée à l'écran d'accueil.
- Il n'existe pas d'invite d'installation automatique sur iOS, l'utilisateur doit faire le geste à la main.
Sur Android et sur ordinateur, l'expérience est fluide. Sur iOS, il faut un onboarding qui explique clairement comment ajouter l'application à l'écran d'accueil, puis comment activer les notifications, faute de quoi l'utilisateur ne les recevra jamais.
Stratégie d'onboarding
- Détecter la plateforme et l'état d'installation.
- Sur iOS non installé, afficher un guide visuel pour l'ajout à l'écran d'accueil.
- Une fois installé, proposer l'activation des notifications au bon moment, pas à la première seconde.
- Garder une expérience complète même sans notifications, elles restent un plus, pas un prérequis.