Introducción

Cuando escuché por primera vez sobre estos términos pensé, está bien, están haciendo las mismas cosas con su hilo separado. Entonces, ¿por qué necesitamos estos 2 términos?

Pero a decir verdad, existen enormes diferencias entre estos 2 términos y cómo se comportan.

Intentaré explicarlo en detalle.

El punto en común entre estos 2 es

1. Se ejecutan en un hilo separado, sin bloquear el hilo principal de Javascript.

Trabajador web

• Aquí el hilo de trabajo puede realizar tareas sin interferir con el hilo principal.
• Se utilizan para tareas que requieren una cantidad significativa de CPU, como manipulación/procesamiento de imágenes, cálculos pesados ​​y procesamiento de datos.
• No tiene capacidades para acceder a DOM y no pueden interceptar las solicitudes de red.
• No tiene ciclo de vida

Trabajador de servicio

• Es un tipo de trabajador web con capacidades adicionales.
• Se puede ejecutar por separado del navegador/incluso cuando el navegador está cerrado.
• Es un componente central de PWA, porque solía habilitar funciones como soporte sin conexión, sincronización en segundo plano y notificaciones automáticas.
• Actúa como un servidor proxy que se encuentra entre el navegador y la red.

Ciclo de vida del trabajador de servicio

1. Registro

• Aquí le indicaremos al navegador dónde existe nuestro archivo javascript del trabajador de servicio.

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

2. Instalación

• Cuando el navegador considera que el trabajador del servicio es nuevo, se activa el evento de instalación.

el siguiente código debemos escribirlo en service-worker.js

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

3. Activación

• Después de la instalación saltará aquí

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

4. Inactivo

• Cuando el trabajador del servicio no está haciendo nada, está en estado inactivo.

5. buscar/Mensaje

• Cada vez que se realiza una solicitud/mensaje de red, el trabajador del servicio se despierta y toma el control

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

6. Terminación

• Si no está en uso, el navegador finalizará el trabajador del servicio para guardar la memoria. Pero cuando no lo sabemos.

Mantendrá a los trabajadores del servicio durante mucho tiempo.

Ejemplo:-

en Chrome Abra este enlace, verá muchos trabajadores de servicio colgados y podrá hacer muchas cosas como inspeccionar/iniciar y enviar un mensaje.

chrome://serviceworker-internals/

Cómo podemos reactivar a los trabajadores del servicio incluso si el navegador está cerrado.

Nota:-
Para este caso específico podemos usar push para activarnos, pero para este uso debemos otorgar permiso de notificación al navegador, de lo contrario no hay manera.

Otras formas son relevantes cuando el navegador aún está abierto

1. buscar evento

• Este evento se activa cada vez que se realiza una solicitud de recuperación.

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

2. Mensaje

• Este evento se activa cuando se recibe un mensaje de otro script. (La comunicación ocurre Trabajador del servicio Otros archivos Javascript)

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

3. Empujar

• Este evento se activa cuando se recibe un mensaje push

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

4. Evento de sincronización

• Este evento se activa cuando se recibe un evento de sincronización en segundo plano.

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

Referencia

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