Internet instable : comment rendre une application web plus tolérante aux coupures ?

Question

Nos utilisateurs perdent souvent leur connexion pendant qu'ils remplissent un long formulaire. À l'envoi : erreur, et tout est perdu. Comment améliorer ça ?

Accepted Answer

Plusieurs couches, de la plus simple à la plus complète :

1. **Sauvegarder le brouillon localement** pendant la saisie (debounce + `localStorage` ou IndexedDB), et le restaurer au rechargement. C'est une solution simple et très efficace.
2. **Ne jamais vider le formulaire en cas d'échec d'envoi.** Affiche un message clair : « Pas de connexion, votre formulaire est conservé. Réessayer. »
3. **Retry automatique avec backoff exponentiel** pour les requêtes idempotentes, et écoute de l'événement `online` pour relancer :
```js
window.addEventListener('online', () => envoyerFileEnAttente());
```
4. **Clé d'idempotence** : génère un UUID par soumission (`Idempotency-Key`). Si la requête a été reçue mais que la réponse s'est perdue, le renvoi ne crée pas de doublon côté serveur.
5. **Timeouts raisonnables** avec `AbortController`, pour ne pas laisser un bouton tourner indéfiniment.
6. **Mode hors ligne complet (PWA)** si c'est central pour ton usage : service worker, file d'envoi en IndexedDB, Background Sync là où c'est supporté.
7. **Indicateur d'état réseau** visible, et désactivation des actions impossibles hors ligne.

Teste avec les DevTools (onglet Réseau → « Offline » ou « Slow 3G »), mais aussi en conditions réelles.

1 Answer