1. Willkommen
In diesem Lab machen Sie eine vorhandene Webanwendung offline verfügbar. Dies ist das erste von mehreren Codelabs, die den Progressive Web App-Workshop begleiten. Es gibt sieben weitere Codelabs in dieser Reihe.
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 Startercode herunter, der für dieses Codelab erforderlich ist:
Wenn Sie das Repository klonen, müssen Sie sich im Branch starter befinden. Die Zip-Datei enthält auch den Code für diesen Branch.
Für diese Codebasis ist Node.js 14 oder höher erforderlich. Sobald Sie den Code haben, führen Sie in der Befehlszeile im Ordner des Codes npm ci aus, um alle erforderlichen Abhängigkeiten zu installieren. Führen Sie dann npm start aus, um den Entwicklungsserver für das Codelab zu starten.
In der Datei README.md des Quellcodes werden alle verteilten Dateien erläutert. Außerdem sind die folgenden wichtigen vorhandenen Dateien, mit denen Sie in diesem Codelab arbeiten werden:
Wichtige Dateien
js/main.js: JavaScript-Hauptdatei der Anwendungservice-worker.js– Service Worker-Datei der Anwendung
3. Offline testen
Bevor Sie Änderungen vornehmen, testen wir, ob die Webanwendung derzeit offline funktioniert. Dazu können Sie entweder Ihren Computer offline schalten und die Webanwendung neu laden oder, wenn Sie Chrome verwenden, so vorgehen:
- Öffnen Sie die Chrome-Entwicklertools.
- Wechseln Sie zum Tab „Anwendung“.
- Wechseln Sie zum Bereich „Service Worker“.
- Aktivieren Sie das Kästchen „Offline“.
- Aktualisieren Sie die Seite, ohne die Chrome-Entwicklertools zu schließen.
Nachdem die Website getestet wurde und offline nicht geladen werden konnte, ist es an der Zeit, einige Onlinefunktionen hinzuzufügen. Deaktivieren Sie das Kästchen „Offline“ und fahren Sie mit dem nächsten Schritt fort.
4. Offline verfügbar machen
Jetzt fügen wir einen einfachen Service Worker hinzu. Dazu sind zwei Schritte erforderlich: den Service Worker registrieren und Ressourcen im Cache speichern.
Service Worker registrieren
Es ist bereits eine leere Service Worker-Datei vorhanden. Damit die Änderungen angezeigt werden, registrieren wir sie in unserer Anwendung. Fügen Sie dazu oben in js/main.js den folgenden Code hinzu:
// 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
Dieser Code registriert die leere Service Worker-Datei service-worker.js, sobald die Seite geladen wurde und nur, wenn die Website Service Worker unterstützt.
Ressourcen im Cache speichern
Damit die Webanwendung offline funktioniert, muss der Browser auf Netzwerkanfragen reagieren und auswählen können, wohin sie weitergeleitet werden sollen. Fügen Sie dazu Folgendes zu service-worker.js 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 Tab mit der Vorschau und öffnen Sie ihn wieder. Sie sollten console.log-Anweisungen sehen, die den verschiedenen Ereignissen im Service Worker entsprechen.
Gehen Sie als Nächstes wieder offline und aktualisieren Sie die Website. Sie sollte auch dann geladen werden, wenn Sie offline sind.
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. Das wird als Pre-Caching bezeichnet, da die Dateien während der Installation im Cache gespeichert werden, anstatt sie erst dann im Cache zu speichern, wenn sie benötigt oder angefordert werden.
Sobald der Service Worker die Website steuert, werden angeforderte Ressourcen wie über einen Proxy an den Service Worker weitergeleitet. Jede Anfrage löst ein Fetch-Ereignis aus, bei dem in diesem Service Worker der Cache nach einer Übereinstimmung durchsucht wird. Wenn eine Übereinstimmung gefunden wird, wird mit der im Cache gespeicherten Ressource geantwortet. Andernfalls wird die Ressource normal angefordert.
Durch das Speichern von Ressourcen im Cache kann die App offline funktionieren, da Netzwerkanfragen vermieden werden. Jetzt kann die App im Offlinemodus mit dem Statuscode 200 antworten.
5. Glückwunsch!
Sie haben gelernt, wie Sie Ihre Webanwendung mit Service Workern und der Cache Storage API offline verfügbar machen.
Das nächste Codelab in der Reihe ist Mit Workbox arbeiten