Das Caching von Assets mit einem Service Worker kann wiederholte Besuche beschleunigen und Offline-Support bieten. Workbox macht dies einfach und ist standardmäßig in der Anwendung „Create React“ enthalten.
Workbox ist in
Erstellen Sie eine React App (CRA) mit einer Standardkonfiguration, die alle
mit jedem Build statische Assets
in Ihrer Anwendung einbinden.
Welchen Nutzen bieten sie?
Mit Service Workern können Sie wichtige Ressourcen im Cache speichern (Precaching) ausgeführt. Wenn ein Nutzer die Webseite ein zweites Mal lädt, Browser diese vom Service Worker abrufen können, anstatt Anfragen an Netzwerk. Dadurch wird die Seite bei wiederholten Besuchen sowie im Inhalte können angezeigt werden, wenn der Nutzer offline ist.
Workbox in CRA
Workbox ist eine Sammlung von Tools, mit denen Sie Dienste erstellen und verwalten können.
Arbeiter. In CRA
workbox-webpack-plugin
ist bereits im Produktions-Build enthalten und muss nur im
src/index.js-Datei, um einen neuen Service Worker mit jedem
Build:
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-Anwendung, für die über diese Datei ein Service Worker aktiviert wird:
So finden Sie heraus, welche Assets im Cache gespeichert werden:
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
Vollbild
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Aktualisieren Sie die App.
Sie werden feststellen, dass in der Spalte Size statt der Nutzlastgröße
Eine (from ServiceWorker)-Nachricht, die angibt, dass diese Ressourcen abgerufen wurden
vom Service Worker erhalten.
Da der Service Worker alle statischen Assets im Cache speichert, versuchen Sie, die Anwendung im Offlinemodus:
- Klicken Sie in den Entwicklertools auf dem Tab Netzwerk das Kästchen Offline an, um eine Offline-Erfahrung zu simulieren.
- Aktualisieren Sie die App.
Die Anwendung funktioniert auf die gleiche Weise, auch ohne Netzwerk. Verbindung!
Caching-Strategien ändern
Die standardmäßige Precaching-Strategie von Workbox in CRA ist cache-first, wobei werden alle statischen Assets aus dem Service Worker-Cache abgerufen. (wenn die Ressource beispielsweise nicht im Cache gespeichert ist), wird die Netzwerkanfrage gestellt. Dieses wird beschrieben, wie Inhalte Nutzern präsentiert werden können, selbst wenn diese sich in einer vollständigen Offline-Status.
Workbox unterstützt zwar die Definition verschiedener Strategien und Ansätze
statische und dynamische Ressourcen im Cache gespeichert werden, kann die Standardkonfiguration in CRA nicht
geändert oder überschrieben werden, es sei denn, Sie werden vollständig ausgeworfen. Es gibt jedoch eine
offenes Angebot
finden Sie weitere Informationen zum Hinzufügen der Unterstützung für externe workbox.config.js-Dateien. Dieses
können Entwickler die Standardeinstellungen überschreiben, indem sie
einzelne workbox.config.js-Datei.
Umgang mit einer Cache-First-Strategie
Zuerst auf den Service Worker-Cache und dann auf das Netzwerk zurückgreifen ist eine hervorragende Möglichkeit, Websites zu erstellen, die bei nachfolgenden Besuchen schneller geladen werden. bis zu einem gewissen Grad offline arbeiten. Es gibt jedoch ein paar Dinge, berücksichtigt werden:
- Wie kann das Caching-Verhalten eines Service Workers getestet werden?
- Sollte es eine Mitteilung geben, die die Nutzenden darüber informiert, dass sie sich Inhalte aus dem Cache?
Die CRA Dokumentation wird diese und andere Punkte erklärt.
Fazit
Verwenden Sie einen Service Worker, um wichtige Ressourcen in Ihrer Anwendung vorab im Cache zu speichern und den Offline-Support für Ihre Nutzer beschleunigen.
- Wenn Sie CRA verwenden, aktivieren Sie den vorkonfigurierten Service Worker in
src/index.js - Wenn Sie zum Erstellen einer React-Anwendung keine CRA verwenden, fügen Sie eine der
viele von Workbox zur Verfügung gestellte Bibliotheken, z. B.
workbox-webpack-plugin, in Ihr des Build-Prozesses. - Achten Sie darauf, wann CRA eine
workbox.config.js-Überschreibungsdatei unterstützt in diesem GitHub-Problem.