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.

Gemeinsamkeit zwischen diesen beiden ist

1. Sie werden in einem separaten Thread ausgeführt, ohne den Haupteinzelthread von Javascript zu blockieren.

Web Worker

• Hier kann der Arbeitsthread Aufgaben ausführen, ohne den Hauptthread 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.
• Es verfügt nicht über die Möglichkeit, auf DOM zuzugreifen, und es kann 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 wird hierher gesprungen

 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. Beendigung

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

Es wird die Servicemitarbeiter sehr lange beschäftigen.

Beispiel:-

in Chrome Wenn Sie diesen Link dort öffnen, werden Sie viele Servicemitarbeiter sehen, die hängen bleiben, und Sie können viele Dinge tun, wie z. B. Überprüfen/Starten und Senden einer Nachricht.

chrome://serviceworker-internals/

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

Notiz:-
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. Ereignis synchronisieren

• 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