Essencialmente, umservice worker se comporta como um servidorproxy 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ênciasoffline eficientes, interceptar requisições de rede – agindo adequadamente de acordo com ostatus atual da conexão – e atualizar osassets que residem no servidor. Service workers também permitem o acesso às APIs depush notification ebackground sync.

Service worker - Conceitos e uso

Umservice worker é um tipo especial deworker baseado em eventos, o qual é registrado para um determinadopath e origem. Na prática, ele é um arquivo JavaScript que pode controlar as páginas do site ao qual ele está associado, interceptando e modificando requisições e a navegação em si. Ele também fazcache dos recursos trafegados de maneira bastante granular, visando oferecer controle total sobre como a sua aplicação se comporta em determinadas situações (o exemplo mais óbvio, naturalmente, é quando não há conexão de rede disponível).

Assim como outros tipos deworker, umservice worker é executado em um contexto isolado. Dessa forma, não tem acesso ao DOM e roda em uma thread completamente separada, sendo incapaz de realizar operações blocantes. Service workers foram projetados para ser totalmente assíncronos; como consequência disso, não permitem o acesso a APIs comoXHR síncrono elocalStorage.

Por questões de segurança,service workers funcionam apenas em sites servidos via HTTPS. A possibilidade de modificar requisições em um domínio desprotegido contra ataques do tipoman-in-the-middle seria desastrosa. No Firefox, é vetado o acesso à API deservice workers para sites abertos noModo de navegação privativa.

Registrando

O registro inicial de umservice worker é feito através do métodoServiceWorkerContainer.register(). Se bem-sucedido, seuservice worker será descarregado no cliente e então ocorrerá a tentativa de instalação/ativação para as URLs acessadas pelo usuário sob a origem registrada ou, caso deseje, apenas dentro de um subconjunto limitado por você.

Download, instalação e ativação

Nesse estágio, seu service worker seguirá o seguinte ciclo de vida:

1. Download
2. Instalação
3. Ativação

Quando o usuário acessa pela primeira vez um site ou página controlado por um service worker, ele é descarregado imediatamente.

Após isso, serão feitos novos downloads em intervalos de aproximadamente 24 horas. O downloadpode ocorrer mais frequentemente, mas eleprecisa ser feito a cada 24 horas para prevenir que scripts ruins sejam um problema por períodos muito extensos.

A tentativa de instalação é feita sempre que o arquivo descarregado é identificado como novo – seja por diferir dosservice workers pré-existentes (é feita uma comparação binária nessa etapa) ou por ser o primeiro descoberto para a página ou site em questão.

Na primeira vez que umservice worker é disponibilizado, é feita a tentativa de instalação. Se bem-sucedida, ele é ativado.

Se, por outro lado, já existe umservice worker pré-instalado para uma página ou site e for disponibilizada uma nova versão, ela será descarregada, mas não imediatamente ativada. Isso é chamado deworker em espera. Só será efetuada a ativação da versão atualizada quando não houver mais páginas utilizando a anterior. Após isso, ele passa a ser oworker ativo. Caso necessário, é possível pular a etapa de espera com o métodoServiceWorkerGlobalScope.skipWaiting(). Em seguida, o novo worker ativo pode reivindicar as páginas existentes usandoClients.claim().

Você pode adicionar umlistener para o eventoInstallEvent. Uma ação padrão, quando esse evento é disparado, é preparar o seuservice worker para ser utilizado (por exemplo: criado um cache usando a API de storage nativa e armazenando nela osassets que você quer que permaneçam disponíveis caso a aplicação fiqueoffline).

Há também o eventoactivate. O momento em que ele é disparado é geralmente o ideal para limpar caches antigos e outras coisas associadas com a versão anterior do seuservice worker.

Seu service worker pode responder a requisições usando oFetchEvent. Você pode manipular a resposta a essas requisições da maneira que quiser, através do métodoFetchEvent.respondWith.

**Nota:**Comooninstall eonactivate podem demorar a serem concluídos, a especificação deservice workers disponibiliza um métodowaitUntil. Ele recebe como parâmetro umapromessa, notificando o navegador que há trabalho em andamento até que aquela promessa seja resolvida. O navegador, portanto, não deverá encerrar o service worker durante esse período de espera.

Para um tutorial completo, mostrando como construir seu primeiro exemplo do zero, leiaUsando Service Workers.

Outras ideias de usos possíveis

• Sincronização de dados embackground
• Responder a requisições de recursos a partir de outras origens
• Receber de forma centralizada atualizações para dados de cálculo mais custoso, como geolocalização ou giroscópio, de forma a permitir que múltiplas páginas façam uso de um único conjunto de dados.
• No lado do cliente, fazer compilação e gerenciamento de dependências para CoffeeScript, LESS, módulos CommonJS/AMD, entre outros.
• Hooks para serviços embackground.
• Templates customizados com base em certos padrões de URL.
• Melhorias de performance como, por exemplo, fazer o pré-carregamento de recursos que o usuário provavelmente irá precisar a curto prazo, como as próximas fotos de um álbum.

No futuro, service workers serão capazes de fazer várias outras coisas úteis para a plataforma web, deixando-a mais próxima deapps nativos em.

É interessante mencionar que outras especificações podem e irão passar a usar o contexto de service workers, por exemplo:

• Sincronização em background: Iniciar um service worker mesmo quando não há usuários no site, de forma que o cache possa ser atualizado;
• Reagir a mensagens push: Iniciar um service worker para enviar uma mensagem aos usuários dizendo que há conteúdo novo disponível;
• Reagir a uma data/hora específica;
• Entrar em umageo-fence.

Interfaces

Cache

Representa o armazenamento para os pares de objetoRequest eResponse, os quais são cacheados como parte do ciclo de vida doServiceWorker.

CacheStorage

Representa o armazenamento para objetosCache. Ele disponibiliza um diretório-mestre com todos os caches nomeados que umServiceWorker pode acessar, mantendo o mapeamento de nomes para os objetosCache correspondentes.

Client

Representa o escopo do cliente de umservice worker. Um cliente pode ser um documento no contexto de um navegador ou umSharedWorker, o qual é controlado por umworker ativo.

Clients

Representa o container para uma lista de objetosClient. É a principal forma de acessar os clientes na origem atual para oservice worker ativo.

ExtendableEvent

Estende a vida dos eventosinstall eactivate disparados noServiceWorkerGlobalScope, como parte do ciclo de vida doservice worker. Isso garante que qualquer evento funcional (como oFetchEvent) não seja despachado para oServiceWorker até que ele conclua as ações em andamento, como por exemplo: atualizar esquemas de banco de dados, apagar caches defasados, etc.

ExtendableMessageEvent

O objeto de evento domessage, o qual é disparado em umservice worker (quando uma mensagem de canal é recebida noServiceWorkerGlobalScope a partir de outro contexto) — estende o tempo de vida desses eventos.

FetchEvent

O parâmetro recebido nohandlerServiceWorkerGlobalScope.onfetch. OFetchEvent representa uma ação de descarregamento que é despachada noServiceWorkerGlobalScope de umServiceWorker. Ele contém informações sobre a requisição e a resposta resultante, além de disponibilizar o métodoFetchEvent.respondWith(), o qual nos permite devolver uma resposta customizada para a página que está sendo controlada.

InstallEvent

O parâmetro recebido nohandleroninstall. A interfaceInstallEvent representa uma ação de instalação que é despachada noServiceWorkerGlobalScope de umServiceWorker. Como deriva doExtendableEvent, ele assegura que eventos funcionais, como oFetchEvent, não sejam despachados durante a instalação.

NavigationPreloadManager

Disponibiliza métodos para gerenciar o pré-carregamento de recursos com umservice worker.

Navigator.serviceWorker

Retornar um objetoServiceWorkerContainer, o qual permite accesso ao registro, remoção, atualização e comunicação com os objetosServiceWorker para odocumento associado.

NotificationEvent

O parâmetro recebido nohandleronnotificationclick. A interfaceNotificationEvent representa um evento declick em uma notificação que é despachado noServiceWorkerGlobalScope de umServiceWorker.

ServiceWorker

Representa umservice worker. Diferentes contextos de navegação (ex: páginas,workers, etc.) podem ser associados com o mesmo objetoServiceWorker.

ServiceWorkerContainer

Disponibiliza um objeto representando o service worker como uma unidade global no ecossistema de rede, incluindo métodos para registrar, desregistrar e atualizarservice workers, além de poder acessar o status de cadaworker e seus registros.

ServiceWorkerGlobalScope

Representa o contexto de execução global de umservice worker.

ServiceWorkerMessageEventDeprecated

Representa uma mensagem enviada a umServiceWorkerGlobalScope.Vale ressaltar que essa interface está defasada em navegadores modernos. As mensagens deservice worker agora usam a interfaceMessageEvent para manter consistência com outras funcionalidades de messageria da web.

ServiceWorkerRegistration

Representa o registro de umservice worker.

ServiceWorkerStateExperimental

Associado com o estado doServiceWorker.

SyncEventNão padrão

A interface SyncEvent representa uma ação de sincronização que é despachada noServiceWorkerGlobalScope de um ServiceWorker.

SyncManagerNão padrão

Disponibiliza uma interface para registrar e listar registros de sincronização.

WindowClient

Representa o escopo de um cliente deservice worker que é um documento em um contexto de navegador, o qual é controlado por umworker ativo. Esse é um tipo especial de objetoClient, como alguns métodos e propriedades adicionais disponíveis.

Especificações

Compatibilidade com navegadores

Veja também

• ServiceWorker Cookbook
• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promises
• Using web workers
• Best Practices for using the VARY header