Servicemitarbeiter in ReactJS

1. Was ist der React Service Worker
2. Funktionen von Servicemitarbeitern
3. So aktivieren Sie React Service Worker
4. Service Worker-Konfiguration
5. Abschluss

Wenn unsere Telefone offline sind und wir weiterhin Nachrichten über unsere Apps empfangen können, ist dies die Arbeit eines Servicemitarbeiters.

Ein perfektes Beispiel ist die Bible Mobile App; Sobald die zugewiesene Zeit abgelaufen ist, erhält der Benutzer einen täglichen Erinnerungsvers von der App namens Push-Benachrichtigung. Die Instagram-App macht dasselbe, wir sind offline, aber wir erhalten immer noch Benachrichtigungen von der App.

Glücklicherweise hat React diese Funktion in ihr Framework eingefügt, und dieser Artikel führt uns durch alles, was wir über den Service Worker wissen müssen.

Was ist der React Service Worker

Service Worker sind spezialisierte JavaScript-Ressourcen, die bestehende Websites verbessern, indem sie als Bindeglied zwischen Webbrowsern und Webservern fungieren.

Ihre Funktionen verbessern die Zuverlässigkeit einer Website, indem sie einen Offline-Zugriff auf die Website ermöglichen und die Gesamtleistung der Webseite steigern; Dies liegt daran, dass einige Arbeiten auf der Webseite dem Hintergrund unterliegen, wodurch die Webseite mit wichtigen Elementen funktioniert.

Offline kann der Nutzer trotzdem durch die Website scrollen, das ist die Handarbeit von Servicemitarbeitern.

Servicemitarbeiter können nur auf HTTPS ausgeführt werden, es sei denn, es wird auf localhost ausgeführt, und außerdem sind sie an eine bestimmte Webseite gebunden. Sie sind ständig wiederverwendbar, wenn Benutzer von Seite zu Seite wechseln. Man sollte den Zustand des Servicemitarbeiters im Auge behalten, da er nach dem Herunterfahren keine Informationen mehr speichert.

Funktionen von Servicemitarbeitern

1. Servicemitarbeiter können wichtige Aspekte einer Website zwischenspeichern; Dies macht es leichter (es lädt schneller), was zu einer verbesserten Website-Leistung führt.
2. Sie ermöglichen Benachrichtigungen und Push-APIs, Funktionen, die bei herkömmlichen Webtechnologien normalerweise nicht verfügbar sind.
3. Mit der Verfügbarkeit von Servicemitarbeitern können Benutzer die Anwendung auch dann noch normal verwenden, wenn sie die Internetfunktionalität verlieren. Dies liegt daran, dass die Servicemitarbeiter dabei geholfen haben, wichtige Teile der Website zwischenzuspeichern.
4. Aktionen, die ausgeführt werden, wenn die App offline ist, können im Hintergrund synchronisiert werden, wenn das Internet vollständig wiederhergestellt ist.

So aktivieren Sie React Service Worker

Ein Service Worker wird standardmäßig generiert, wenn wir die create-react-app verwenden, um ein neues React-Projekt zu erstellen. Wir finden die Datei serviceWorker.js im Ordner src des Projekts.

Aber der Servicemitarbeiter ist nicht sofort einsatzbereit; wir müssen es konfigurieren.

Wir müssen den Servicemitarbeiter registrieren; Wir navigieren zur Datei src/index.js und suchen nach dieser Zeile serviceWorker.unregister(); und ändern Sie es in serviceWorker.register();.

Durch die Registrierung des Servicemitarbeiters kann er auch funktionsfähig werden, und sobald die Produktionsversion der React-App erstellt ist, wird der Servicemitarbeiter daneben aktiviert.

Service Worker-Konfiguration

Wenn wir die React-App erstellen, speichert service-worker.js standardmäßig Inhalte, die direkt mit der Webseite verbunden sind; Ein Beispiel ist ein in die Webseite eingebettetes Video. Wir müssen eine neue Datei erstellen, custom-service-worker.js, und dann register() bearbeiten, um die neu erstellte Datei zu laden.

In der Datei serviceWorker.js suchen wir etwa in Zeile 34 nach dem Event-Listener load() und fügen ihm unsere benutzerdefinierte Datei wie unten hinzu.

window.addEventListener('load', () => {
  const swUrl = `${process.env.PUBLIC_URL}/custom-service-
worker.js`;
  ...
}

Sobald dies erledigt ist, werden wir als nächstes die Datei package.json aktualisieren.

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Wir müssen jetzt das Workbox-Plug-in von Google installieren. wir verwenden npm install --save-dev workbox-build. Das Workbox-Plugin ist nützlich, um Funktionen wie die Hintergrundsynchronisierung einfach in den Service Worker zu integrieren.

Als Nächstes erstellen wir eine Konfigurationsdatei, um die Create React App (CRA) anzuweisen, den neu erstellten benutzerdefinierten Servicemitarbeiter wie unten einzufügen.

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = function override(config, env) {
  config.plugins = config.plugins.map((plugin) => {
    if (plugin.constructor.name === 'GenerateSW') {
      return new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/custom-service-worker.js',
        swDest: 'service-worker.js'
      });
    }
    return plugin;
  });
  return config;
};

Zuletzt erstellen wir den benutzerdefinierten Worker, um ein bestimmtes Verzeichnis zwischenzuspeichern, wie unten gezeigt.

workbox.routing.registerRoute(
    new RegExp('/path/to/cache/directory/'), workbox.strategies.NetworkFirst());
workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

Sobald wir mit diesem Teil fertig sind, können wir die Anwendung erstellen.

Abschluss

Die von Servicemitarbeitern angebotenen Funktionen sind ideal, damit Webanwendungen reibungslos funktionieren, und mit der Zeit werden sie verwendet, um einige neue und aufregende Funktionen zu erstellen, mit denen Webanwendungen noch besser funktionieren als bisher.