Service Worker und Offline-Betrieb

Wie funktioniert eine Web-App ohne Netz?

Ein Service Worker ist ein Skript, das der Browser im Hintergrund neben der Seite ausführt und das die Anfragen der Seite abfangen kann. Damit antwortet eine Web-App aus gespeicherten Kopien und öffnet auch ohne Netz.

Das ist wichtig im Zug, im Keller der Bibliothek oder bei schwachem Empfang: Eine App, die dann nichts zeigt, wird nicht mehr geöffnet.

Am Ende dieser Lektion

Notiz

Ich kann erklären, wie eine Seite mit einem Service Worker offline arbeitet, und die passende Cache-Strategie wählen.

Schlüsselwörter

Begriff	Was er bedeutet	Beispiel
Service Worker	ein Skript, das im Hintergrund läuft und Anfragen der Seite abfangen kann
Cache	ein Speicher für Kopien von Dateien
Offline	ohne Verbindung zum Netz
Strategie	die Regel, ob eine Antwort aus dem Cache oder aus dem Netz kommt
Registrierung	der Aufruf, mit dem die Seite dem Browser den Worker nennt	serviceWorker.register
Sichere Adresse	eine Adresse mit https, nur auf ihr erlaubt der Browser Service Worker

Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.

Ein Service Worker steht zwischen Seite und Netz

Jede Anfrage der Seite nach einer Datei geht zuerst an den Service Worker. Er entscheidet: Antworte ich aus dem Cache, oder frage ich das Netz?

Der Worker ist ein eigenes Skript und kann die Seite nicht direkt verändern. Die Seite meldet ihn mit navigator.serviceWorker.register an. Der Browser erlaubt das nur auf einer sicheren Adresse.

Das Lab prüft die Liste der Dateien

Die App des Labs hat einen Service Worker. Er nennt einen Cache und eine Liste von Dateien, die er beim Installieren speichern will. Das Skript prüft, ob jede Datei der Liste existiert.

Die Ausgabe ist englisch: cache name ist der Name des Caches, files to cache die Zahl der Dateien, exists heißt vorhanden, MISSING heißt fehlt. Ob der Browser den Worker auf der Vorschau-Adresse zulässt, sagt seine Konsole.

Die Dateiliste des Service Workers prüfen

Befehl

docker exec jupyter python3 steps/offline.py

Hier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.

Installieren speichert die ganze Liste oder nichts

Beim Installieren ruft der Worker cache.addAll mit der Liste auf. Der Browser speichert dann alle Dateien. Kann er nur eine nicht laden, scheitert der ganze Aufruf, und der Worker wird nicht installiert.

Darum muss jeder Eintrag der Liste existieren. Ein Tippfehler im Namen reicht, und die App ist nicht offline nutzbar.

Ein Beispiel: ein Service Worker für die Mensa

Code: web

const CACHE = "mensa-v1";
const DATEIEN = ["/", "/style.css", "/app.js"];

self.addEventListener("install", (ereignis) => {
  ereignis.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(DATEIEN)));
});

self.addEventListener("fetch", (ereignis) => {
  ereignis.respondWith(
    caches.match(ereignis.request).then((treffer) => treffer || fetch(ereignis.request))
  );
});

Der Name des Caches trägt eine Version

Der Name mensa-v1 enthält eine Versionsnummer. Ändern Sie die Dateien, geben Sie dem Cache einen neuen Namen, etwa mensa-v2. So erkennt der Worker, dass alte Kopien veraltet sind.

Ohne neue Version zeigt eine App nach einer Änderung oft weiter die alte Seite, weil der Cache zuerst antwortet.

Aus dem Cache oder aus dem Netz?

Code: python

cache = ["/index.html", "/style.css"]

for adresse in ["/index.html", "/neu.html"]:
    if adresse in cache:
        print(adresse, "kommt aus dem Cache")
    else:
        print(adresse, "kommt aus dem Netz")
# Fügen Sie "/neu.html" zum Cache hinzu und starten Sie noch einmal.

Eine Strategie legt fest, wer zuerst antwortet

Bei Cache zuerst (cache-first) antwortet der Cache, wenn er eine Kopie hat, sonst das Netz. Das ist schnell und passt zu Dateien, die sich selten ändern. Bei Netz zuerst (network-first) antwortet das Netz, und nur bei einem Ausfall der Cache.

Bei Stale while revalidate zeigt der Cache sofort die alte Kopie, und im Hintergrund holt der Worker eine neue.

Ein Beispiel: welche Strategie wofür passt

Strategie	Antwortet zuerst	Passt zu
cache-first	Cache	Symbole, Schrift, Stylesheet
network-first	Netz	Speiseplan von heute
stale-while-revalidate	Cache, dann Aktualisierung	Liste, die sich langsam ändert
cache-only	Nur Cache	Dateien, die beim Installieren gespeichert wurden
network-only	Nur Netz	Zahlungen, die nie veraltet sein dürfen