Web Worker vs. Service Worker

Einführung

Als ich zum ersten Mal von diesen Begriffen hörte, dachte ich: Okay, sie machen mit ihrem separaten Thread ungefähr das Gleiche. Warum brauchen wir dann diese beiden Begriffe?

Aber um die Wahrheit zu sagen, es gibt große Unterschiede zwischen diesen beiden Begriffen und ihrem Verhalten.

Ich werde versuchen, es im Detail zu erklären.

Die Gemeinsamkeiten dieser beiden sind

1. Sie laufen in einem separaten Thread, ohne den Haupt-Einzelthread von Javascript zu blockieren.

Web Worker

• Hier kann der Worker-Thread Aufgaben ausführen, ohne den Haupt-Thread zu beeinträchtigen.
• Diese werden für Aufgaben verwendet, die eine erhebliche Menge an CPU erfordern, wie z. B. Bildmanipulation/-verarbeitung, umfangreiche Berechnungen und Datenverarbeitung.
• Sie verfügen nicht über die Möglichkeit, auf DOM zuzugreifen, und sie können die Netzwerkanforderungen nicht abfangen.
• Es hat keinen Lebenszyklus

Servicemitarbeiter

• Es handelt sich um eine Art Web-Worker mit zusätzlichen Funktionen.
• Es kann unabhängig vom Browser ausgeführt werden / auch wenn der Browser geschlossen ist.
• Es ist eine Kernkomponente von PWA, da sie früher Funktionen wie Offline-Unterstützung, Hintergrundsynchronisierung und Push-Benachrichtigungen ermöglichten.
• Es verhält sich wie ein Proxyserver, der zwischen dem Browser und dem Netzwerk sitzt.

Lebenszyklus eines Servicemitarbeiters

1. Anmeldung

• Hier teilen wir dem Browser mit, wo sich unsere Service-Worker-Javascript-Datei befindet.

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2. Installation

• Wenn der Browser den Service Worker als neu ansieht, wird das Installationsereignis ausgelöst.

Den folgenden Code müssen wir in service-worker.js
schreiben

self.addEventListener('install', (event) => {
// do your operations
})

3. Aktivierung

• Nach der Installation springt es hierher

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4. Leerlauf

• Wenn der Servicemitarbeiter nichts tut, befindet er sich im Ruhezustand.

5. Abruf/Nachricht

• Immer wenn eine Netzwerkanfrage/-nachricht gestellt wird, wacht der Servicemitarbeiter auf und übernimmt die Kontrolle

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6. Kündigung

• Bei Nichtgebrauch beendet der Browser den Dienstmitarbeiter, um den Speicher zu sparen. Aber wenn wir es nicht wissen.

Es wird die Servicemitarbeiter sehr lange beschäftigen.

Beispiel:-

in Chrome. Öffnen Sie diesen Link. Dort werden Sie viele Servicemitarbeiter sehen, die hängen, und Sie können viele Dinge tun, wie zum Beispiel Inspizieren/Starten und eine Nachricht senden.

chrome://serviceworker-internals/

Wie wir Servicemitarbeiter aufwecken können, auch wenn der Browser geschlossen ist.

Hinweis:-
Für diesen speziellen Fall können wir Push zum Aufwecken verwenden, aber für diese Verwendung muss dem Browser die Benachrichtigungsberechtigung erteilt werden, sonst gibt es keine Möglichkeit.

Andere Möglichkeiten sind relevant, wenn der Browser noch geöffnet ist

1. Ereignis abrufen

• Dieses Ereignis wird immer dann ausgelöst, wenn eine Abrufanforderung gestellt wird.

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2. Nachricht

• Dieses Ereignis wird ausgelöst, wenn eine Nachricht von einem anderen Skript empfangen wird. (Kommunikation geschieht Service Worker + andere Javascript-Dateien)

   self.addEventListener('message', (event) => {
// Handle message Event
})

3. Drücken

• Dieses Ereignis wird ausgelöst, wenn eine Push-Nachricht empfangen wird

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4. Synchronisierungsereignis

• Dieses Ereignis wird ausgelöst, wenn ein Hintergrundsynchronisierungsereignis empfangen wird.

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

Referenz

1. https://frontendmasters.com/courses/background-javascript

Das obige ist der detaillierte Inhalt vonWeb Worker vs. Service Worker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!