Das Caching von Assets mit einem Service Worker kann wiederholte Besuche beschleunigen und Offline-Support bereitstellen. Mit Workbox ist das ganz einfach. Sie ist standardmäßig in der Create React App enthalten.
Workbox ist in Create React App (CRA) mit einer Standardkonfiguration eingebunden, die alle statischen Assets in Ihrer Anwendung bei jedem Build vorab im Cache speichert.
Welchen Nutzen bieten sie?
Mit Service Workern können Sie wichtige Ressourcen im Cache speichern (Precaching). Wenn ein Nutzer die Webseite ein zweites Mal lädt, kann der Browser sie dann vom Service Worker abrufen, anstatt Anfragen an das Netzwerk zu senden. Dadurch werden die Seiten bei wiederholten Besuchen schneller geladen und Inhalte auch dann angezeigt, wenn der Nutzer offline ist.
Workbox in CRA
Workbox ist eine Sammlung von Tools, mit denen Sie Service Worker erstellen und verwalten können. In CRA ist der workbox-webpack-plugin bereits im Produktions-Build enthalten und muss nur in der Datei src/index.js aktiviert werden, um bei jedem Build einen neuen Service Worker zu registrieren:
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 React-Anwendung, die mit CRA erstellt wurde und für die ein Service Worker über diese Datei aktiviert ist:
So siehst du, welche Assets im Cache gespeichert werden:
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus. - Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Aktualisieren Sie die App.
Sie werden feststellen, dass in der Spalte Size anstelle der Nutzlastgröße eine (from ServiceWorker)-Meldung angezeigt wird, die darauf hinweist, 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:
- Klicken Sie in den Entwicklertools auf dem Tab Netzwerk das Kästchen Offline an, um ein Offline-Erlebnis zu simulieren.
- Aktualisieren Sie die App.
Die Anwendung funktioniert auf dieselbe Weise, auch ohne Netzwerkverbindung.
Caching-Strategien ändern
Die von Workbox in CRA verwendete Standard-Precaching-Strategie ist cache-first. Dabei werden alle statischen Assets aus dem Service Worker-Cache abgerufen. Wenn dies fehlschlägt (wenn die Ressource beispielsweise nicht im Cache gespeichert ist), wird die Netzwerkanfrage gestellt. So können Inhalte Nutzern auch dann bereitgestellt werden, wenn diese vollständig offline sind.
Obwohl Workbox Unterstützung für die Definition verschiedener Strategien und Ansätze für das Caching statischer und dynamischer Ressourcen bietet, kann die Standardkonfiguration in CRA nur geändert oder überschrieben werden, wenn Sie sie vollständig ausschließen. Es gibt jedoch einen offenen Vorschlag, um die Unterstützung für eine externe workbox.config.js-Datei zu prüfen. Dies würde Entwicklern die Möglichkeit bieten, die Standardeinstellungen einfach durch Erstellen einer einzigen workbox.config.js-Datei zu überschreiben.
Cache-First-Strategie handhaben
Wenn Sie Websites erst einmal auf den Service Worker-Cache und dann auf das Netzwerk zurückgreifen, können Sie Websites erstellen, die bei nachfolgenden Besuchen schneller geladen werden und bis zu einem gewissen Grad offline arbeiten. Es gibt jedoch einige Dinge, die berücksichtigt werden müssen:
- Wie kann ein Service Worker das Caching-Verhalten testen?
- Sollte eine Nachricht für Nutzer angezeigt werden, die sie darüber informiert, dass sie sich im Cache gespeicherte Inhalte ansehen?
In der CRA-Dokumentation werden diese und weitere Punkte ausführlich erläutert.
Fazit
Nutzen Sie einen Service Worker, um wichtige Ressourcen in Ihrer Anwendung vorab im Cache zu speichern. Dies beschleunigt die Nutzerfreundlichkeit und bietet Offlinesupport.
- Wenn Sie CRA verwenden, aktivieren Sie den vorkonfigurierten Service 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. - Achten Sie in diesem GitHub-Problem darauf, wann CRA eine
workbox.config.js-Überschreibungsdatei unterstützt.