Das Caching von Assets mit einem Service Worker kann wiederholte Besuche beschleunigen und Offline-Unterstützung bieten. Workbox macht dies einfach und ist standardmäßig in Create React App enthalten.
Workbox ist in Create React App (CRA) mit einer Standardkonfiguration integriert, die alle statischen Assets in Ihrer Anwendung bei jedem Build im Voraus 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 vom Service Worker abrufen, anstatt Anfragen an das Netzwerk zu senden. Das führt zu schnelleren Seitenaufbauten bei wiederholten Besuchen und ermöglicht es, Inhalte anzuzeigen, 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 in der ein Service Worker über diese Datei aktiviert ist:
So finden Sie heraus, welche Assets im Cache gespeichert werden:
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (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, können Sie die Anwendung offline verwenden:
- Aktivieren Sie auf dem Tab Netzwerk in den Entwicklertools das Kästchen Offline, um eine Offline-Nutzung zu simulieren.
- Aktualisieren Sie die App.
Die Anwendung funktioniert auch ohne Netzwerkverbindung genauso.
Caching-Strategien ändern
Die von Workbox in CRA verwendete Standardstrategie für das Precaching 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 gespeichert ist), wird die Netzwerkanfrage gestellt. So können Nutzern Inhalte auch dann präsentiert werden, wenn sie komplett offline sind.
Workbox bietet zwar Unterstützung für die Definition verschiedener Strategien und Ansätze zum Caching statischer und dynamischer Ressourcen, die Standardkonfiguration in CRA kann jedoch nur geändert oder überschrieben werden, wenn Sie sie vollständig entfernen. Es gibt jedoch einen offenen Vorschlag, die Unterstützung für eine externe workbox.config.js-Datei zu prüfen. So können Entwickler die Standardeinstellungen überschreiben, indem sie einfach eine einzelne workbox.config.js-Datei erstellen.
Cache-First-Strategie verarbeiten
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 bis zu einem gewissen Grad offline funktionieren. Es gibt jedoch einige Dinge, die berücksichtigt werden müssen:
- Wie kann das Caching-Verhalten eines Service Workers getestet werden?
- Sollte es eine Nachricht für Nutzer geben, 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
Verwenden Sie einen Service Worker, um wichtige Ressourcen in Ihrer Anwendung vorab im Cache zu speichern. So können Sie Ihren Nutzern eine schnellere Nutzung und Offline-Unterstützung bieten.
- Wenn Sie CRA verwenden, aktivieren Sie den vorkonfigurierten Service Worker in
src/index.js. - Wenn Sie CRA nicht zum Erstellen einer React-Anwendung verwenden, binden Sie eine der vielen von Workbox bereitgestellten Bibliotheken wie
workbox-webpack-pluginin Ihren Build-Prozess ein. - In diesem GitHub-Problem können Sie nachsehen, wann CRA eine
workbox.config.js-Überschreibungsdatei unterstützt.