1. Willkommen
In diesem Lab nehmen Sie eine bestehende Webanwendung vor und machen sie offline. Dies ist der erste in einer Reihe von Companion-Codelabs für den Progressive Web App Workshop. In dieser Reihe gibt es sieben weitere Codelabs.
Lerninhalte
- Service Worker per Hand schreiben
- Service Worker einer vorhandenen Webanwendung hinzufügen
- Service Worker und die Cache Storage API verwenden, um Ressourcen offline verfügbar zu machen
Wichtige Informationen
- Grundlegendes HTML und JavaScript
Voraussetzungen
- Ein Browser, der Service Workers unterstützt
2. Einrichten
Klonen Sie zuerst den Startcode oder laden Sie ihn herunter, um dieses Codelab abzuschließen:
Wenn Sie das Repository klonen, müssen Sie sich im Zweig starter 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 der Code verfügbar ist, führen Sie npm ci über die Befehlszeile im Codeordner 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 folgende wichtige Dateien im Codelab verfügbar:
Schlüsseldateien
js/main.js– Haupt-JavaScript-Datei der Anwendungservice-worker.js– Service Worker-Datei von Anwendungen
3. Offline testen
Bevor du Änderungen vornimmst, solltest du testen, ob die Web-App derzeit offline funktioniert. Entfernen Sie dazu entweder unseren Computer offline und aktualisieren Sie die Web-App oder verwenden Sie Chrome:
- Chrome-Entwicklertools öffnen
- Zum Tab „Anwendung“ wechseln
- Zum Abschnitt „Service Worker“ wechseln
- Klicken Sie das Kästchen „Offline“ an.
- Seite aktualisieren, ohne die Chrome-Entwicklertools zu schließen
Die Website wurde getestet und konnte nicht offline geladen werden. Daher ist es an der Zeit, einige Onlinefunktionen hinzuzufügen. Entfernen Sie das Häkchen bei Offline und fahren Sie mit dem nächsten Schritt fort.
4. Offline speichern
Jetzt ist es an der Zeit, einen einfachen Service Worker hinzuzufügen. Dies geschieht in zwei Schritten: den Service Worker registrieren und Caching-Ressourcen speichern.
Service Worker registrieren
Es ist bereits eine leere Service Worker-Datei vorhanden. Um sicherzustellen, dass die Änderungen angezeigt werden, müssen Sie sie in unserer Anwendung registrieren. Fügen Sie dazu oben in js/main.js den folgenden Code ein:
import swURL from 'sw:../service-worker.js';
// 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 {
const reg = await navigator.serviceWorker.register(swURL);
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.js-Dienst-Worker-Datei registriert, sobald die Seite geladen wurde, und nur dann, wenn die Website Service Worker unterstützt.
Ressourcen im Cache speichern
Damit die Web-App offline funktioniert, muss der Browser in der Lage sein, auf Netzwerkanfragen zu antworten und festzulegen, wohin er weitergeleitet werden soll. Fügen Sie dazu service-worker.js zu
// 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 dann zum Browser zurück, schließen Sie den Vorschau-Tab und öffnen Sie ihn wieder. Sie sollten console.logs sehen, die den verschiedenen Ereignissen im Service Worker entsprechen.
Stellen Sie die Seite anschließend wieder offline und aktualisieren Sie die Website. Sie sollten sehen, dass sie geladen wird, auch wenn Sie offline sind.
Erklärung
Während des Installationsereignisses des Service Workers wird ein benannter Cache mithilfe der Cache Storage API geöffnet. Die in precacheResources angegebenen Dateien und Routen werden dann mit der cache.addAll-Methode in den Cache geladen. Die Funktion wird als Precaching bezeichnet, weil sie die Dateien während der Installation präventiv im Cache speichert, anstatt sie im Cache zu speichern, wenn sie benötigt oder angefordert werden.
Sobald der Service Worker die Website steuert, werden die angeforderten Ressourcen wie der Proxy durch den Service Worker weitergeleitet. Jede Anfrage löst ein Abrufereignis aus, das in diesem Service-Worker im Cache nach einer Übereinstimmung sucht, sofern eine Übereinstimmung besteht und die im Cache gespeicherte Ressource antwortet. Wenn keine Übereinstimmung gefunden wird, wird die Ressource normal angefordert.
Dank Caching-Ressourcen kann die Anwendung offline arbeiten, ohne Netzwerkanfragen zu vermeiden. Die App kann jetzt auch mit einem 200-Statuscode reagieren.
5. Glückwunsch!
Sie haben gelernt, wie Sie Ihre Webanwendung mit Service Workern und der Cache Storage API offline schalten.
Das nächste Codelab in dieser Reihe ist Working with Workbox (Mit Workbox arbeiten).