1. Willkommen
In diesem Lab machen Sie eine vorhandene Webanwendung offline verfügbar. Dies ist das erste in einer Reihe von Begleit-Codelabs für den Workshop zu progressiven Web-Apps. Diese Reihe umfasst sieben weitere Codelabs.
Lerninhalte
- Service Worker manuell schreiben
- Service Worker zu einer vorhandenen Webanwendung hinzufügen
- Service Worker und Cache Storage API verwenden, um Ressourcen offline verfügbar zu machen
Wichtige Informationen
- Einfaches HTML und JavaScript
Voraussetzungen
- Ein Browser, der Service Worker unterstützt
2. Einrichtung
Klonen oder laden Sie zuerst den Starter-Code herunter, der für dieses Codelab benötigt wird:
Wenn Sie das Repository klonen, achten Sie darauf, dass Sie sich im starter
-Branch befinden. Die ZIP-Datei enthält auch den Code für diesen Zweig.
Für diese Codebasis ist Node.js 14 oder höher erforderlich. Sobald Sie den Code haben, führen Sie npm ci
über die Befehlszeile im Ordner des Codes aus, um alle erforderlichen Abhängigkeiten zu installieren. Führen Sie dann npm start
aus, um den Entwicklungsserver für das Codelab zu starten.
Die README.md
-Datei des Quellcodes enthält eine Erklärung für alle verteilten Dateien. Außerdem sind die folgenden Dateien wichtig, mit denen Sie in diesem Codelab arbeiten werden:
Schlüsseldateien
js/main.js
– JavaScript-Datei der Hauptanwendungservice-worker.js
: Die Service Worker-Datei der Anwendung
3. Offline testen
Bevor wir Änderungen vornehmen, testen wir, ob die Web-App derzeit offline funktioniert. Dazu können Sie entweder die Verbindung Ihres Computers zum Internet trennen und die Web-App neu laden oder, wenn Sie Chrome verwenden, Folgendes tun:
- Chrome-Entwicklertools öffnen
- Wechseln Sie zum Tab „Anwendung“.
- Zum Abschnitt „Service Worker“ wechseln
- Klicken Sie das Kästchen „Offline“ an.
- Seite aktualisieren, ohne die Chrome-Entwicklertools zu schließen
Nachdem die Website getestet wurde und das Laden im Offlinemodus fehlgeschlagen ist, ist es an der Zeit, einige Onlinefunktionen hinzuzufügen. Entfernen Sie das Häkchen aus dem Kästchen für „Offline“ und fahren Sie mit dem nächsten Schritt fort.
4. Zusätzliche Plattformen nutzen
Es ist an der Zeit, einen einfachen Service Worker hinzuzufügen. Dies geschieht in zwei Schritten: Registrieren des Service Workers und Zwischenspeichern von Ressourcen.
Service Worker registrieren
Es gibt bereits eine leere Service Worker-Datei. Damit die Änderungen angezeigt werden, müssen wir sie in unserer Anwendung registrieren. Fügen Sie dazu den folgenden Code oben in js/main.js
ein:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Erklärung
Mit diesem Code wird die leere Service Worker-Datei service-worker.js
registriert, sobald die Seite geladen wurde und nur, wenn die Website Service Worker unterstützt.
Ressourcen vorab im Cache speichern
Damit die Web-App offline funktioniert, muss der Browser auf Netzwerkanfragen reagieren und entscheiden können, wohin er sie weiterleitet. Fügen Sie dazu service-worker.js
Folgendes hinzu:
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Kehren Sie nun zum Browser zurück, schließen Sie den Vorschautab und öffnen Sie ihn wieder. Sie sollten console.log
für die verschiedenen Ereignisse im Service Worker sehen.
Gehen Sie dann wieder offline und aktualisieren Sie die Website. Die Seite sollte geladen werden, obwohl du offline bist.
Erklärung
Während des Installationsereignisses des Service Workers wird mit der Cache Storage API ein benannter Cache geöffnet. Die in precacheResources
angegebenen Dateien und Routen werden dann mit der Methode cache.addAll
in den Cache geladen. Dies wird als Pre-Caching bezeichnet, da die Dateien während der Installation und nicht erst bei Bedarf oder auf Anfrage gecacht werden.
Sobald der Service Worker die Website steuert, werden angeforderte Ressourcen wie über einen Proxy durch den Service Worker geleitet. Jede Anfrage löst ein Fetch-Ereignis aus, bei dem in diesem Service Worker im Cache nach einer Übereinstimmung gesucht wird. Wenn eine Übereinstimmung gefunden wird, wird mit der im Cache gespeicherten Ressource geantwortet. Wenn es keine Übereinstimmung gibt, wird die Ressource normal angefordert.
Durch das Caching von Ressourcen kann die App offline verwendet werden, da keine Netzwerkanfragen erforderlich sind. Die App kann jetzt im Offlinemodus mit dem Statuscode 200 antworten.
5. Glückwunsch!
Sie haben gelernt, wie Sie Ihre Web-App mithilfe von Service Workern und der Cache Storage API offline verfügbar machen.
Das nächste Codelab in der Reihe ist Workbox verwenden.