Service Worker

Published in

Tech Intelipost

4 min readJan 2, 2020

Pois com esse tipo de ferramenta você tem liberdade de abrir diversas portas para uma nova realidade da web. Parece até bizarro falar que a “web” tende a ser mais offline, pois quando falamos de web, já vem na cabeça internet, on line, … não é?

Antes, vamos falar de App Cache! =]

As vantagens

Configuração simples
Funciona em todos os browsers (até no IE)
Implementação rápida

Desvantagens

Esquecer alguma URL
Colocar os mime-types no servidor
Nada pode dar erro 404 e 500
Nunca fazer o cache do arquivo "manifest" (Isso será um grande problema)
Impossível de debugar e entre outros

Uma demonstração de uma implementação simples com o hello.appcache:

Como mostrado acima, vemos que é bem simples e implementação, porém as desvantagens são grandes.

Sendo assim, conclui que o App Cache é: Limitado, Complicado e Chato :/

Mas …

Agora temos o Service Work (agora não, faz um tempo ;])

Então vamos lá, falar de Service Work:

O que é ?

Essencialmente, um service worker se comporta como um servidor proxy situado entre uma aplicação web, o navegador e a rede (quando esta estiver disponível). Eles servem, dentre outras coisas, para possibilitar a criação de experiências offline eficientes, interceptar requisições de rede — agindo adequadamente de acordo com o status atual da conexão — e atualizar os assets que residem no servidor. Service workers também permitem o acesso às APIs de push notification e background sync.

Vantagens

Roda em background
Baseado em Promise
API de Cache
Programático e Controlado
PWA
Todo o poder de Javascript

Desvantagens (mas por segurança)

Somente em HTTPS
Totalmente assíncrono
Somente IndexDB, não funciona com LocalStorage
Ajax synchronous
Para a qualquer momento

Algumas integrações com API Nativas

Background Sync
Push Notification
Geofencing
Alarm
Cache API
etc

Suporte

Exemplo de implementação

Aqui um exemplo de inicialização, já validando o suporte do service worker, neste momento você pode criar um fallback para os browsers que não suporta.

Nessa parte você faz a instalação do cache, criando um nome para ele e guardando os assets que deseja fazer o cache.

Aqui você faz um interceptor da request, e valida se existe no cache antes de buscar no servidor

Também te ajuda a criar uma versão do cache, para atualizações. Sendo assim você cria um novo formato de gravar o cache e após está tudo cacheado, ele remove o cache antigo do dispositivo do cliente.

De fato é um pouco mais de código que o App Cache, mas você todo o poder do Javascript e acesso as API's nativas do browser, sendo assim o céu é o limite.