Visão geral do service worker

Os service workers oferecem utilidade incrível, mas podem ser complicados de trabalhar no início. O Workbox facilita o uso dos service workers. No entanto, como os service workers resolvem problemas difíceis, qualquer abstração dessa tecnologia também será complicada sem entendê-la. Portanto, estas primeiras partes da documentação vão abordar essa tecnologia antes de entrar nos detalhes do Workbox.

Para ver uma lista em execução de service workers, digite chrome://serviceworker-internals/ na barra de endereço.

Uma lista em execução de service workers.

O que os service workers oferecem?

Os service workers são recursos JavaScript especializados que atuam como proxies entre navegadores e servidores da Web. Elas têm como objetivo aumentar a confiabilidade oferecendo acesso off-line, bem como melhorar o desempenho da página.

Um ciclo de vida semelhante ao de um app com melhorias progressivas

Os service workers são uma melhoria dos sites atuais. Isso significa que, se os usuários em navegadores que não oferecem suporte aos service workers acessarem sites que os utilizam, nenhuma funcionalidade de referência será corrompida. É disso que trata a web.

Os service workers melhoram os sites progressivamente usando um ciclo de vida semelhante ao dos aplicativos específicos da plataforma. Pense no que acontece quando um aplicativo nativo é instalado de uma app store:

  • É feita uma solicitação para fazer o download do aplicativo.
  • O download e a instalação do app são feitos.
  • O app está pronto para uso e pode ser iniciado.
  • O app é atualizado para lançamentos.

O ciclo de vida do service worker é semelhante, mas com uma abordagem de aprimoramento progressivo. Na primeira visita a uma página da Web que instala um novo service worker, a visita inicial a uma página fornece a funcionalidade básica enquanto o service worker faz o download. Depois que um service worker é instalado e ativado, ele controla a página para oferecer mais confiabilidade e velocidade.

Acesso a uma API de armazenamento em cache orientada por JavaScript

Um aspecto indispensável da tecnologia do service worker é a interface Cache, que é um mecanismo de armazenamento em cache totalmente separado do cache HTTP. A interface Cache pode ser acessada no escopo do service worker e no escopo da linha de execução principal. Isso abre muitas possibilidades para interações baseadas em usuários com uma instância de Cache.

Enquanto o cache HTTP é influenciado pelas diretivas de armazenamento em cache especificadas nos cabeçalhos HTTP, a interface Cache é programável por JavaScript. Isso significa que as respostas em cache para solicitações de rede podem ser baseadas em qualquer lógica que seja melhor para um determinado site. Exemplo:

  • Armazenar recursos estáticos no cache na primeira solicitação para eles e exibi-los somente a partir do cache para cada solicitação seguinte.
  • Armazenar a marcação de página no cache, mas só exibir marcações do cache em cenários off-line.
  • Exibir respostas desatualizadas para determinados recursos do cache, mas atualizá-las a partir da rede em segundo plano.
  • Transmita conteúdo parcial da rede e junte-o com um shell de app do cache para melhorar o desempenho perceptível.

Cada uma delas é um exemplo de estratégia de armazenamento em cache. As estratégias de armazenamento em cache possibilitam experiências off-line e podem oferecer melhor desempenho ao desviar das verificações de revalidação de alta latência que o cache HTTP inicia. Antes de mergulhar no Workbox, vamos revisar algumas estratégias de armazenamento em cache e códigos que as fazem funcionar.

API assíncrona e orientada a eventos

A transferência de dados pela rede é inerentemente assíncrona. Demora tempo para solicitar um recurso, para que um servidor responda a essa solicitação e para o download da resposta. O tempo envolvido é variado e indeterminado. Os service workers acomodam essa assincronia com uma API orientada por eventos, usando callbacks para eventos como:

Os eventos podem ser registrados usando uma API addEventListener conhecida. Todos esses eventos podem interagir com a interface Cache. Particularmente, a capacidade de executar callbacks quando as solicitações de rede são enviadas é vital para oferecer a confiabilidade e a velocidade desejadas.

Fazer um trabalho assíncrono no JavaScript envolve o uso de promessas. Como as promessas também sustentam async e await, esses recursos de JavaScript também podem ser usados para simplificar o código do service worker (e Workbox!) para uma melhor experiência do desenvolvedor.

Pré-armazenamento em cache e armazenamento em cache no tempo de execução

A interação entre um service worker e uma instância de Cache envolve dois conceitos distintos de armazenamento em cache: pré-armazenamento em cache e armazenamento em cache no ambiente de execução. Cada um desses elementos é fundamental para os benefícios que um service worker pode oferecer.

Pré-armazenamento em cache é o processo de armazenar recursos em cache antecipadamente, normalmente durante a instalação de um service worker. Com o pré-armazenamento em cache, é possível fazer o download e armazenar os principais recursos estáticos e materiais necessários para acesso off-line em uma instância Cache. Esse tipo de armazenamento em cache também melhora a velocidade para páginas subsequentes que exigem os recursos pré-armazenados em cache.

O armazenamento em cache em tempo de execução é quando uma estratégia de armazenamento em cache é aplicada a recursos à medida que eles são solicitados da rede durante o tempo de execução. Esse tipo de armazenamento em cache é útil porque garante acesso off-line a páginas e recursos que o usuário já visitou.

Quando combinadas, essas abordagens para usar a interface Cache em um service worker oferecem um enorme benefício para a experiência do usuário e fornecem comportamentos parecidos com os de apps para páginas da Web comuns.

Isolamento da linha de execução principal

O estado do desempenho do JavaScript é um desafio em constante evolução para a Web e, do ponto de vista do usuário, isso depende dos recursos do dispositivo e do acesso à Internet de alta velocidade. Quanto mais JavaScript for usado, mais desafiador vai se tornar criar sites rápidos que ofereçam experiências agradáveis aos usuários.

Os service workers são como web workers, porque todo o trabalho que eles fazem ocorre nas próprias linhas de execução. Isso significa que as tarefas dos service workers não competirão por atenção com outras tarefas na linha de execução principal. Os service workers priorizam o usuário desde a concepção!

O caminho à frente

Esta documentação é apenas uma visão geral. Há mais alguns assuntos a serem discutidos sobre os service workers antes de abordar o Workbox corretamente, mas não se preocupe: com uma compreensão sólida dos service workers, usar o Workbox será uma experiência mais fácil e produtiva.