Introdução

Quando ouvi falar desses termos pela primeira vez, pensei: ok, eles estão fazendo as mesmas coisas com seus tópicos separados. Então, por que precisamos desses 2 termos?

Mas, para dizer a verdade, existem grandes diferenças entre esses 2 termos e como eles se comportam.

Tentarei explicar em detalhes.

O ponto em comum entre esses dois é

1. Eles estão sendo executados em um thread separado, sem bloquear o thread único principal do Javascript.

Trabalhador da Web

• Aqui o thread de trabalho pode executar tarefas sem interferir no thread principal.
• Eles são usados ​​para tarefas que exigem uma quantidade significativa de CPU, como manipulação/processamento de imagens, cálculos pesados ​​e processamento de dados.
• Ele não tem recursos para acessar o DOM e não pode interceptar as solicitações de rede.
• Não tem ciclo de vida

Trabalhador de serviços

• É um tipo de web trabalhador com recursos adicionais.
• Ele pode ser executado separadamente do navegador / mesmo quando o navegador está fechado.
• É um componente central do PWA, porque eles costumavam habilitar recursos como suporte offline, sincronização em segundo plano e notificações push.
• Ele funciona como um servidor proxy que fica entre o navegador e a rede.

Ciclo de vida do trabalhador de serviços

1. Registro

• Aqui informaremos ao navegador onde existe nosso arquivo javascript do service worker.

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

2. Instalação

• Quando o navegador considera o service worker novo, o evento install é acionado.

o código abaixo, precisamos escrevê-lo em service-worker.js

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

3. Ativação

• Após a instalação ele irá pular aqui

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

4. Parado

• Quando o service worker não está fazendo nada, ele está em estado inativo.

5. buscar/mensagem

• Sempre que uma solicitação/mensagem de rede é feita, o service worker acorda e assume o controle

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

6. Rescisão

• Se não estiver em uso, o navegador encerrará o service worker para economizar memória. Mas quando não sabemos.

Isso manterá os prestadores de serviço por muito tempo.

Exemplo:-

no Chrome Abra este link, você verá muitos service workers pendurados e poderá fazer muitas coisas como inspecionar/iniciar e enviar uma mensagem.

chrome://serviceworker-internals/

Como podemos acordar os funcionários do serviço mesmo com o navegador fechado.

Observação:-
Para isso específico podemos usar push para ativar, mas para esse uso deve-se dar permissão de Notificação ao Navegador, caso contrário não tem como.

Outras formas são relevantes quando o navegador ainda está aberto

1. buscar Evento

• Este evento é acionado sempre que uma solicitação de busca é feita.

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

2. Mensagem

• Este evento é acionado quando uma mensagem é recebida de outro script. (Comunicação acontecendo Service Worker Outros arquivos Javascript)

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

3. Empurrar

• Este evento é acionado quando uma mensagem push é recebida

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

4. Evento de sincronização

• Este evento é acionado quando um evento de sincronização em segundo plano é recebido.

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

Referência

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