Historique des conversations
Chargement...
Chapitre 7 : Offline UX
1. Une page "Offline" personnalisée
Au lieu d'afficher l'erreur par défaut du navigateur ("Pas de connexion"), une PWA affiche une page élégante indiquant que l'utilisateur est hors-ligne.
2. Intercepter les erreurs de Fetch
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match('/offline.html');
})
);
});3. Expérience utilisateur (UX)
Informez l'utilisateur de son état de connexion via une petite bannière ou une modification visuelle de l'interface.
Conclusion
Le hors-ligne n'est plus une fatalité, c'est une fonctionnalité. Dans le prochain chapitre : **IndexedDB pour le stockage local**.
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les notions
Atelier #1Expliquez avec vos mots le concept central de ce chapitre.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Reportez-vous au cours */
#2 — Application guidée
Atelier #2Reprenez l'exemple du cours et réalisez un cas pratique.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Comparez vos résultats avec les exemples */
#3 — Mini défi d'autonomie
Atelier #3Concevez une mini-solution liée à ce chapitre.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Vérifiez la cohérence technique */