Travailleur Web contre travailleur de service

Introduction

Quand j'ai entendu parler de ces termes pour la première fois, je me suis dit, d'accord, ils font à peu près la même chose avec leur fil de discussion séparé. Alors Pourquoi avons-nous besoin de ces 2 termes ?

Mais à vrai dire il y a d'énormes différences entre ces 2 termes et leur comportement.

Je vais essayer de vous expliquer en détail.

Le point commun entre ces 2 est

1. Ils s'exécutent dans un thread séparé, sans bloquer le thread principal unique de Javascript.

Travailleur Web

• Ici, le thread de travail peut effectuer des tâches sans interférer avec le thread principal.
• Ceux-ci sont utilisés pour les tâches nécessitant une quantité importante de processeur, telles que la manipulation/le traitement d'images, les calculs lourds et le traitement des données.
• Il n'a pas la capacité d'accéder au DOM et ne peut pas intercepter les requêtes réseau.
• Il n'a pas de cycle de vie

Travailleur de service

• C'est un type de Web Worker avec des capacités supplémentaires.
• Il peut s'exécuter séparément du navigateur / même lorsque le navigateur est fermé.
• Il s'agit d'un composant essentiel de PWA, car ils permettaient d'activer des fonctionnalités telles que la prise en charge hors ligne, la synchronisation en arrière-plan et les notifications push.
• Il agit comme un serveur proxy situé entre le navigateur et le réseau.

Cycle de vie du travailleur de service

1. Inscription

• Ici, nous indiquerons au navigateur où se trouve notre fichier javascript de service worker.

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

2. Installation

• Lorsque le navigateur considère le service worker comme nouveau, l'événement d'installation est déclenché.

le code ci-dessous dont nous avons besoin pour l'écrire dans service-worker.js

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

3. Activation

• Après l'installation, il sautera ici

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

4. Inactif

• Lorsque le technicien de service ne fait rien, il est en état d'inactivité.

5. récupérer/Message

• Chaque fois qu'une demande/un message réseau est effectué, le technicien de service se réveille et prend le contrôle

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

6. Résiliation

• S'il n'est pas utilisé, le navigateur mettra fin au service worker pour économiser la mémoire. Mais quand on ne sait pas.

Cela gardera les employés de service pendant très longtemps.

Exemple :-

dans Chrome, ouvrez ce lien, vous verrez de nombreux techniciens de service suspendus et vous pourrez faire beaucoup de choses comme inspecter/démarrer et envoyer un message.

chrome://serviceworker-internals/

Comment pouvons-nous réveiller les employés du service même si le navigateur est fermé.

Remarque :-
Pour cela spécifique, nous pouvons utiliser Push pour se réveiller, mais pour cette utilisation, nous devons donner l'autorisation de notification au navigateur, sinon il n'y a aucun moyen.

D'autres moyens sont pertinents lorsque le navigateur est encore ouvert

1. récupérer l'événement

• Cet événement est déclenché chaque fois qu'une demande de récupération est effectuée.

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

2. Message

• Cet événement est déclenché lorsqu'un message est reçu d'un autre script. (Communication en cours Service Worker + Autres fichiers Javascript)

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

3. Pousser

• Cet événement est déclenché lorsqu'un message push est reçu

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

4. Événement de synchronisation

• Cet événement est déclenché lorsqu'un événement de synchronisation en arrière-plan est reçu.

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

Référence

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!