HTML Academy · Lektion

Offline-Fallback-Seite

Liefern Sie eine zwischengespeicherte Fallback-Seite aus, wenn der Benutzer offline ist

Offline-Fallback-Seite ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum eine Offline-Seite?

Wenn das Netzwerk nicht verfügbar ist, kann ein Service Worker einen benutzerdefinierten Offline-Fallback bereitstellen, anstatt den allgemeinen Browserfehler "keine Internetverbindung" anzuzeigen. Die Nutzer sehen die Marke, nützliche Informationen und alle zwischengespeicherten Inhalte — deutlich besser als einen Chromium-Dinosaurier oder einen traurigen Tab in Firefox.

Den Fallback zwischenspeichern

Speichern Sie im Installationsereignis des Service Workers die Seite offline.html vorab im Cache, damit sie immer verfügbar ist, selbst wenn der Nutzer zuvor noch keine Seite offline aufgerufen hat. Der Browser stellt sicher, dass der Cache bis zur nächsten Änderung an sw.js erhalten bleibt.

const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
  );
});

Bei Fehlern bereitstellen

Versuchen Sie im Fetch-Ereignis zuerst das Netzwerk; bei einem Fehler geben Sie die zwischengespeicherte offline.html zurück. Dieses Muster (Network-First mit Offline-Fallback) ist das einfachste PWA-Rezept und funktioniert für die meisten Content-Websites.

self.addEventListener("fetch", (e) => {
  if (e.request.mode !== "navigate") return;
  e.respondWith(
    fetch(e.request).catch(() => caches.match("/offline.html"))
  );
});

Prüfung des Navigate-Modus

Verwenden Sie offline.html nur als Fallback für Navigationsanfragen (das Laden oberster Seiten). Lassen Sie bei Bildern, Skripten und anderen Abrufen von Unterressourcen die Anfrage fehlschlagen oder greifen Sie auf jeweils passende zwischengespeicherte Kopien zurück — eine HTML-Seite anstelle eines fehlenden Bildes auszuliefern, würde die Seite noch stärker beschädigen.

Die Offline-Seite gestalten

Halten Sie die Offline-Seite schlank: minimales CSS und keine externen Ressourcen, sofern diese nicht ebenfalls zwischengespeichert sind. Zeigen Sie das Markenlogo, eine freundliche Nachricht ("Sie sind offline — die Inhalte werden geladen, sobald Sie wieder verbunden sind") und eine Schaltfläche „Erneut versuchen“, die location.reload() aufruft.

<!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&apos;re offline</h1>
  <p>This page is unavailable without an internet connection.</p>
  <button onclick="location.reload()">Try again</button>
</body>
</html>

Besuchte Seiten zwischenspeichern

Über eine einzelne Offline-Seite hinaus können Sie erfolgreich geladene Seiten mit einer Stale-While-Revalidate- oder Runtime-Cache-Strategie zwischenspeichern. Wenn Nutzer ohne Netzwerk zu einem kürzlich angesehenen Artikel zurückkehren, werden die Inhalte weiterhin angezeigt; nur noch nicht aufgerufene Seiten schlagen fehl.

Cache-Versionen aktualisieren

Wenn Sie offline.html aktualisieren, ändern Sie die Konstante CACHE in sw.js (CACHE = "v2"). Löschen Sie im Activate-Ereignis alte Caches: caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k))). Veraltete Offline-Seiten sorgen für Verwirrung.

Offline testen

Mit der Drosselung „Offline“ im Network-Panel der Chrome DevTools lässt sich ein fehlendes Netzwerk simulieren. Navigieren Sie durch Ihre App und überprüfen Sie, dass die Offline-Seite für noch nicht aufgerufene Routen erscheint und zuvor besuchte Seiten weiterhin aus dem Cache geladen werden.

Fehler bei Unterressourcen

Wenn die Offline-Seite selbst auf eine nicht zwischengespeicherte CSS-Datei verweist, kann diese offline nicht geladen werden und die Seite wird ohne Formatierung dargestellt. Speichern Sie im Installations-Handler alle von der Offline-Seite benötigten Ressourcen vorab im Cache (CSS, Logo, Schriftarten).

Über statische Offline-Inhalte hinaus

Fortgeschrittene PWAs stellen Benutzeraktionen offline mithilfe von Background Sync in eine Warteschlange, wiederholen sie bei zurückkehrender Verbindung und zeigen in der Zwischenzeit eine optimistische Benutzeroberfläche. Die Bibliothek Workbox bietet Rezepte für diese Muster; eine eigene Implementierung ist ebenfalls möglich, erfordert aber mehr Aufwand.

Verbindung wiederherstellen

Hören Sie auf der Offline-Seite auf das online-Ereignis, um eine wiederhergestellte Verbindung zu erkennen: window.addEventListener("online", () => location.reload()). Die Seite lädt sich sofort neu, sobald die Verbindung wieder verfügbar ist — ohne dass der Nutzer auf „Erneut versuchen“ tippen muss.

Ehrlich bleiben

Schaltflächen wie „Erneut versuchen“ sollten tatsächlich einen neuen Versuch starten — rufen Sie location.reload() auf und zeigen Sie keinen falschen Ladeindikator, der nichts bewirkt. Eine ehrliche Benutzeroberfläche erhält das Vertrauen der Nutzer; irreführende Offline-Seiten beschädigen die Glaubwürdigkeit schnell, sobald die Nutzer dies bemerken.

Wissenscheck

Warum sollte der Fallback offline.html nur für Navigationsanfragen (e.request.mode === "navigate") zurückgegeben werden und nicht für alle fehlgeschlagenen Anfragen?

Zusammenfassung

Service Worker können eine benutzerdefinierte Offline-Fallback-Seite anstelle des allgemeinen Browserfehlers bereitstellen. Speichern Sie offline.html bei der Installation vorab im Cache und liefern Sie sie im Fetch-Ereignis zurück, wenn das Netzwerk für eine Navigationsanfrage ausfällt. Halten Sie die Seite eigenständig, versionieren Sie den Cache bei Aktualisierungen und hören Sie für das automatische Neuladen auf das online-Ereignis. Testen Sie mit der Offline-Drosselung der DevTools.

Häufig gestellte Fragen

Ist die Lektion „Offline-Fallback-Seite“ kostenlos?

Ja — der vollständige Text von „Offline-Fallback-Seite“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Offline-Fallback-Seite“?

Liefern Sie eine zwischengespeicherte Fallback-Seite aus, wenn der Benutzer offline ist Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Offline-Fallback-Seite“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy