Das Caching von Assets mit einem Service Worker kann wiederholte Besuche beschleunigen und Offline-Support bieten. Workbox macht das ganz einfach und ist standardmäßig in Create React App enthalten.
Workbox ist in „Create React App“ (CRA) mit einer Standardkonfiguration eingebunden, die alle statischen Assets in Ihrer Anwendung mit jedem Build vorab im Cache speichert.
Welchen Nutzen bieten sie?
Mit Service Workern können Sie wichtige Ressourcen im Cache speichern (Vorab-Caching). Wenn ein Nutzer die Webseite also ein zweites Mal lädt, kann der Browser sie vom Service Worker abrufen, anstatt Anfragen an das Netzwerk zu senden. Dadurch wird die Seite bei wiederholten Besuchen schneller geladen und Inhalte können auch dann angezeigt werden, wenn der Nutzer offline ist.
Workbox in CRA
Workbox ist eine Sammlung von Tools, mit denen Sie Dienstarbeiter erstellen und verwalten können. In CRA ist workbox-webpack-plugin bereits im Produktionsbuild enthalten und muss nur in der Datei src/index.js aktiviert werden, damit bei jedem Build ein neuer Service Worker registriert wird:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
Hier ist ein Beispiel für eine mit CRA erstellte React-App, für die ein Dienstworker über diese Datei aktiviert ist:
So siehst du, welche Assets im Cache gespeichert werden:
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild
. - Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Aktualisieren Sie die App.
Anstatt der Nutzlastgröße wird in der Spalte Size die Meldung (from ServiceWorker) angezeigt, um anzugeben, dass diese Ressourcen vom Service Worker abgerufen wurden.
Da der Service Worker alle statischen Assets im Cache speichert, versuchen Sie, die Anwendung offline zu verwenden:
- Aktivieren Sie in den Entwicklertools auf dem Tab Netzwerk das Kästchen Offline, um eine Offlineumgebung zu simulieren.
- Laden Sie die App neu.
Die Anwendung funktioniert genau gleich, auch ohne Netzwerkverbindung.
Caching-Strategien ändern
Die Standardstrategie für das Vorab-Caching, die von Workbox in CRA verwendet wird, ist cache-first. Dabei werden alle statischen Assets aus dem Service Worker-Cache abgerufen. Wenn das fehlschlägt (z. B. wenn die Ressource nicht im Cache ist), wird die Netzwerkanfrage gesendet. So können Nutzern auch dann Inhalte präsentiert werden, wenn sie vollständig offline sind.
Workbox unterstützt zwar verschiedene Strategien und Ansätze zum Caching statischer und dynamischer Ressourcen, die Standardkonfiguration in CRA kann jedoch nur geändert oder überschrieben werden, wenn Sie die Workbox vollständig entfernen. Es gibt jedoch einen offenen Vorschlag, wie Sie die Unterstützung einer externen workbox.config.js-Datei testen können. So könnten Entwickler die Standardeinstellungen überschreiben, indem sie einfach eine einzelne workbox.config.js-Datei erstellen.
Cache-first-Strategie verwenden
Wenn Sie zuerst den Service Worker-Cache verwenden und dann auf das Netzwerk zurückgreifen, können Sie Websites erstellen, die bei nachfolgenden Besuchen schneller geladen werden und teilweise auch offline funktionieren. Beachten Sie dabei aber Folgendes:
- Wie können das Caching-Verhalten eines Service Workers getestet werden?
- Sollten Nutzer darüber informiert werden, dass sie sich gecachte Inhalte ansehen?
In der Dokumentation zur Risikobewertung werden diese und weitere Punkte ausführlich erläutert.
Fazit
Mit einem Dienst-Worker können Sie wichtige Ressourcen in Ihrer Anwendung vorab im Cache speichern, um Ihren Nutzern eine schnellere Nutzung und Offlineunterstützung zu bieten.
- Wenn Sie CRA verwenden, aktivieren Sie den vorkonfigurierten Dienst-Worker in
src/index.js. - Wenn Sie keine CRA zum Erstellen einer React-Anwendung verwenden, fügen Sie eine der vielen von Workbox bereitgestellten Bibliotheken in Ihren Build-Prozess ein, z. B.
workbox-webpack-plugin. - Informationen dazu, wann CRA eine
workbox.config.js-Überschreibungsdatei unterstützt, finden Sie in diesem GitHub-Problem.