Introdução a Service Worker

Nesse posts vamos falar sobre service worker é um dos recursos-chave dentro das Progressive web Apps vamos entender como ele funciona e o seu ciclo de vida. Para quem ainda não viu, estou gravando uma série sobre PWA no meu canal do youtube, até o momento tenho mais de 12 aulas gravadas também estou adicionando conteúdo complementar no blog.

O que é um service worker?

Nada mais é que o coração das PWAs, não é nenhuma tecnologia especial e sim um arquivo JavaScript que roda em segundo plano em nossa aplicação o que isso significa? Ele não é executado na thread principal da aplicação junto com execução do HTML e CSS, ele não tem acesso ao DOM, por exemplo. Isso abre uma porta para recursos rodarem independente do browser, por exemplo, push notifications e execução de código em segundo plano. Outro recurso extremamente importante é o suporte a experiência offline, dando aos usuários o controle sobre a aplicação independente da conectividade.

Pontos importantes sobre Service Worker

• Precisa estar rodando em HTTPS
• Ele é uma JavaScript Worker, ele não tem acesso ao DOM
• Permite controlar como serão feitos os requests a rede
• Faz o uso intensivo de promises
• Precisa ser instalado por outro JavaScript
• Possui um escopo e esse escopo é baseado onde o arquivo do service worker se encontra.

Ciclo de vida

Quando registrado por outro JavaScript, o service worker passa a ter um ciclo de vida independente do conteúdo web em que foi registrado. Ele será movido para outra Thread como mencionamos anteriormente, quando registrado ele irá chamar o evento Install event, se durante o processo de instalação ocorrer um erro na transferência de algum arquivo o processo de instalação irá falhar. mas se tudo ocorrer bem ele irá disparar um segundo evento Active event.

Depois que o Active event é disparado o service worker está pronto para disparar funções em segundo plano e acompanhar os dados que estão sendo transferidos entre aplicação e a rede. Neste momento conseguimos definir estratégia de cache e suporte offline. A imagem abaixo resume os passos que acabamos de comentar.

Na imagem acima temos uma definição completa do ciclo de vida de um service worker, com adição a um ponto importante quando adicionamos uma nova versão ela fica em estado de espera, ela só será instalada quando todas as instâncias da nossa aplicação forem finalizadas.

Registrando um Service worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // service worker registrado com sucesso
      console.log('ServiceWorker registrado no seguinte escopo: ', registration.scope);
    }, function(err) {
      // falha no registro:(
      console.log('Falha no registro do ServiceWorker: ', err);
    });
  });
}
Code language: JavaScript (javascript)

O código acima será implementado pelo o JavaScript responsável por registrar o nosso Service Worker, na primeira linha verificamos se o nosso browser possui suporte a tecnologia, caso tenha, o registramos com a função com navigator.serviceWorker.register e através de uma promise verificamos se o service worker foi instalado com sucesso. E dentro do nosso sw.js podemos adicionar listener para acompanhar o seu ciclo de vida:

self.addEventListener('install', function(event) {
  // acompanha a instalação do service worker
});

self.addEventListener('activate', function(event) {
  // acompanha quando o service worker está ativo
});

self.addEventListener('fetch', function(event) {
  // acompanha quando a aplicação faz transferência de arquivos
});
Code language: PHP (php)

Os listeners serão importante para criar um cache, acompanha mensagens e definir estratégias de cache. Para esse post, vamos fechando por aqui, se ainda não segue o meu canal no YouTube, lá estou sempre postando conteúdo sobre PWA: https://www.youtube.com/user/fdangellys

Veja os posts sobre PWA aqui

Veja também o mini curso sobre PWA