Precaching in Create React App mit Workbox

Wenn Sie Assets mit einem Service Worker im Cache speichern, können Sie wiederholte Besuche beschleunigen und Offlineunterstützung anbieten. Workbox macht das ganz einfach und ist standardmäßig in Create React App enthalten.

Houssein Djirdeh

Workbox ist in Create React App (CRA) mit einer Standardkonfiguration eingebunden, die bei jedem Build alle statischen Assets in Ihrer Anwendung im Voraus im Cache speichert.

Anfragen/Antworten mit Service Worker

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. Das führt zu schnelleren Seitenladezeiten bei wiederholten Besuchen und ermöglicht die Anzeige von Inhalten, 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, drücken Sie App ansehen und dann Vollbild 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.
  • Laden Sie die App neu.

Anstatt der Nutzlastgröße wird in der Spalte Size die Meldung (from ServiceWorker) angezeigt, um anzugeben, dass diese Ressourcen vom Service Worker abgerufen wurden.

Netzwerkanfragen mit einem Service Worker

Da der Service Worker alle statischen Assets im Cache speichert, können Sie die Anwendung auch offline verwenden:

  1. Aktivieren Sie in den Entwicklertools auf dem Tab Netzwerk das Kästchen Offline, um eine Offlineumgebung zu simulieren.
  2. 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, die Unterstützung für eine externe workbox.config.js-Datei zu prüfen. 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.

  1. Wenn Sie CRA verwenden, aktivieren Sie den vorkonfigurierten Dienst-Worker in src/index.js.
  2. Wenn Sie keine CRA zum Erstellen einer React-Anwendung verwenden, nehmen Sie eine der vielen von Workbox bereitgestellten Bibliotheken wie workbox-webpack-plugin in Ihren Build-Prozess auf.
  3. Informationen dazu, wann CRA eine workbox.config.js-Überschreibungsdatei unterstützt, finden Sie in diesem GitHub-Problem.