Page de repli hors connexion
Servez une page de repli mise en cache lorsque l’utilisateur est hors connexion.
Page de repli hors connexion est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Pourquoi une page hors connexion ?
Lorsque le réseau est indisponible, un script de service peut fournir une solution de secours personnalisée au lieu de l’erreur générique « pas d’Internet » du navigateur. L’utilisateur voit la marque, des informations utiles et tout contenu mis en cache ; c’est bien mieux que le dinosaure de Chromium ou l’onglet triste de Firefox.
Mise en cache de la solution de secours
Dans l’événement d’installation du script de service, mettez au préalable la page offline.html en cache afin qu’elle soit toujours disponible, même avant que l’utilisateur ne navigue hors connexion. Le navigateur garantit que le cache subsiste jusqu’à la prochaine modification de sw.js.
const CACHE = "v1";
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
);
});Fourniture en cas d’échec
Dans l’événement de récupération, essayez d’abord le réseau ; en cas d’échec, renvoyez la page offline.html mise en cache. Ce modèle (réseau prioritaire avec solution de secours hors connexion) est la recette PWA la plus simple et convient à la plupart des sites de contenu.
self.addEventListener("fetch", (e) => {
if (e.request.mode !== "navigate") return;
e.respondWith(
fetch(e.request).catch(() => caches.match("/offline.html"))
);
});Vérification du mode de navigation
Utilisez offline.html comme solution de secours uniquement pour les requêtes de navigation (chargements de pages de premier niveau). Pour les images, les scripts et les autres récupérations de sous-ressources, laissez-les échouer ou utilisez des copies mises en cache propres à chaque ressource ; fournir une page HTML à la place d’une image manquante dégrade encore davantage la page.
Conception de la page hors connexion
Gardez la page hors connexion légère : CSS minimal, aucune ressource externe sauf si elle est également mise en cache. Affichez le logo de la marque, un message accueillant (« Vous êtes hors connexion — le contenu se chargera lorsque vous vous reconnecterez ») et un bouton Réessayer qui appelle location.reload().
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
<h1>You're offline</h1>
<p>This page is unavailable without an internet connection.</p>
<button onclick="location.reload()">Try again</button>
</body>
</html>Mise en cache des pages consultées
Au-delà d’une simple page hors connexion, mettez en cache les pages chargées avec succès en utilisant une stratégie de mise en cache avec revalidation différée ou une stratégie de cache d’exécution. Le retour à un article récemment consulté sans réseau affiche toujours son contenu ; seules les pages jamais consultées échouent.
Mise à jour des versions du cache
Lorsque vous mettez à jour offline.html, modifiez la constante CACHE dans sw.js (CACHE = "v2"). Dans l’événement d’activation, supprimez les anciens caches : caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Les anciennes pages hors connexion prêtent à confusion.
Vérification du mode hors connexion
Le panneau Réseau de Chrome DevTools → la limitation « Hors connexion » simule l’absence de réseau. Naviguez dans votre application ; vérifiez que la page hors connexion apparaît pour les itinéraires jamais consultés et que les pages déjà visitées se chargent toujours depuis le cache.
Échec des sous-ressources
Si la page hors connexion elle-même fait référence à un fichier CSS qui n’est pas mis en cache, ce fichier ne se charge pas hors connexion et la page s’affiche sans styles. Mettez en cache au préalable toutes les ressources nécessaires à la page hors connexion (CSS, logo, polices) dans le gestionnaire d’installation.
Au-delà du mode hors connexion statique
Les PWA avancées placent les actions de l’utilisateur en file d’attente hors connexion grâce à la synchronisation en arrière-plan, les réessaient lorsque la connexion revient et affichent une interface optimiste entre-temps. La bibliothèque Workbox fournit des recettes pour ces modèles ; les implémenter vous-même est également possible, mais demande davantage de travail.
Rétablissement de la connexion
Écoutez l’événement de connexion sur la page hors connexion pour détecter le rétablissement du réseau : window.addEventListener("online", () => location.reload()). La page se recharge dès que la connexion revient, sans que l’utilisateur ait besoin d’appuyer sur Réessayer.
Ne trompez pas l’utilisateur
Les boutons « Réessayer » doivent réellement effectuer une nouvelle tentative : appelez location.reload(), plutôt que d’afficher un faux indicateur de chargement qui ne fait rien. Une interface honnête préserve la confiance de l’utilisateur ; les pages hors connexion trompeuses nuisent rapidement à la crédibilité lorsqu’elles sont découvertes.
Vérification des connaissances
Pourquoi la solution de secours offline.html doit-elle être renvoyée uniquement pour les requêtes de navigation (e.request.mode === "navigate") et non pour toutes les requêtes qui échouent ?
Résumé
Les scripts de service peuvent fournir une page hors connexion personnalisée au lieu de l’erreur générique du navigateur. Mettez offline.html en cache lors de l’installation, puis fournissez-la lors de la récupération lorsque le réseau échoue et que la requête est une navigation. Gardez la page autonome, versionnez le cache pour les mises à jour et écoutez l’événement de connexion pour recharger automatiquement la page. Effectuez les vérifications avec la limitation hors connexion de DevTools.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Page de repli hors connexion » est-elle gratuite ?
Oui — le texte complet de « Page de repli hors connexion » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Page de repli hors connexion » ?
Servez une page de repli mise en cache lorsque l’utilisateur est hors connexion. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Page de repli hors connexion » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le manifeste d’application Web
- Enregistrer un service worker depuis le HTML
- Couleur du thème et icônes de l’application
- Page de repli hors connexion