Was ist Service Worker in reagieren js

92

Beim Erstellen einer Reaktions-App wird standardmäßig der Service Worker aufgerufen. Warum wird ein Servicemitarbeiter eingesetzt? Was ist der Grund für den Standardaufruf?

javascript reactjs service-worker usergs
quelle

Antworten:

101

Möglicherweise benötigen Sie keinen Servicemitarbeiter für Ihre Anwendung. Wenn Sie ein Projekt mit der Create-React-App erstellen, wird es standardmäßig aufgerufen

Servicemitarbeiter werden in diesem Artikel gut erklärt . Um es zusammenzufassen

A service workerist ein Skript, das Ihr Browser getrennt von einer Webseite im Hintergrund ausführt und die Tür zu Funktionen öffnet, für die keine Webseite oder Benutzerinteraktion erforderlich ist. Bereits heute enthalten sie Funktionen wie push notificationsund background syncund haben ability to intercept and handle network requests, einschließlich programmatically managing a cache of responses.

In Zukunft könnten Servicemitarbeiter andere Dinge wie periodic syncoder unterstützen geofencing.

Nach dieser PR erstellen-reagieren-App

Service workerswerden mit create-react-app via eingeführt SWPrecacheWebpackPlugin.

Die Verwendung eines Server-Workers mit einer Cache-First-Strategie bietet Leistungsvorteile, da das Netzwerk kein Engpass mehr für die Erfüllung von Navigationsanforderungen ist. Dies bedeutet jedoch, dass Entwickler (und Benutzer) nur beim Besuch einer Seite "N + 1" bereitgestellte Updates sehen, da zuvor zwischengespeicherte Ressourcen im Hintergrund aktualisiert werden.

Der Aufruf von register service workerist in neuen Apps standardmäßig aktiviert, Sie können ihn jedoch jederzeit entfernen und kehren dann zum normalen Verhalten zurück.

Shubham Khatri
quelle
2
Wie für jetzt generiert hat ReactJS App SW-Code, aber Kommentar besagt, dass die Registerfunktion nicht aufgerufen wird. Die Frage ist also, wo ich es nennen soll.
Daneel S. Yaitskov
@ DaneelS.Yaitskov, Sie können es in einer Datei index.js der obersten Ebene oder ähnlichem aufrufen.
Siddhartha
1
@Siddhartha Könnten Sie so freundlich sein, ein konkretes Beispiel zu liefern und vielleicht die Antwort zu aktualisieren? Ich fand das sehr nützlich, aber es fehlen diese letzten Details. Vielen Dank.
Ted Stresen-Reuter
13

In einfachen und einfachen Worten, es ist ein Skript, das der Browser im Hintergrund ausführt und in keinerlei Beziehung zu Webseiten oder dem DOM steht und sofort einsatzbereite Funktionen bietet. Es hilft Ihnen auch dabei, Ihre Assets und andere Dateien zwischenzuspeichern, damit der Benutzer offline oder in einem langsamen Netzwerk ist.

Einige dieser Funktionen sind Proxy-Netzwerkanforderungen, Push-Benachrichtigungen und Hintergrundsynchronisierung. Servicemitarbeiter stellen sicher, dass der Benutzer über eine umfassende Offline-Erfahrung verfügt.

Sie können sich den Servicemitarbeiter als jemanden vorstellen, der zwischen Client und Server sitzt, und alle Anforderungen, die an den Server gestellt werden, werden vom Servicemitarbeiter weitergeleitet. Grundsätzlich ein mittlerer Mann. Da alle Anforderungen durch den Servicemitarbeiter geleitet werden, können diese Anforderungen sofort abgefangen werden.

Geben Sie hier die Bildbeschreibung ein

Nikz
quelle
4

Ich möchte zwei wichtige Überlegungen zu Servicemitarbeitern hinzufügen, die berücksichtigt werden müssen:

  1. Servicemitarbeiter benötigen HTTPS. Um lokale Tests zu ermöglichen, gilt diese Einschränkung jedoch nicht für localhost. Dies ist aus Sicherheitsgründen so, da sich ein Service Worker wie ein Mann zwischen der Webanwendung und dem Server verhält.

  2. Mit Create React App Service wird Worker nur in der Produktionsumgebung aktiviert, beispielsweise beim Ausführen npm run build.

Service Worker hilft Ihnen bei der Entwicklung einer Progressive Web App . Eine gute Ressource dazu im Zusammenhang mit Create React App finden Sie auf ihrer Website hier .

Anouar
quelle