Os service workers oferecem uma utilidade incrível, mas podem ser complicados de trabalhar no início. O Workbox torna os service workers mais fáceis de usar. 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 documentações vão abordar essa tecnologia antes de conferir os detalhes do Workbox.
Para ver uma lista de service workers em execução, insira chrome://serviceworker-internals/ na barra de endereço.
O que os service workers oferecem?
Service workers são ativos JavaScript especializados que atuam como proxies entre navegadores e servidores da Web. Eles visam melhorar a confiabilidade oferecendo acesso off-line e melhorar o desempenho da página.
um ciclo de vida semelhante a um app em constante aprimoramento
Os service workers são uma melhoria dos sites que já existem. Isso significa que, se os usuários em navegadores não compatíveis com service workers acessarem sites que os utilizam, nenhuma funcionalidade de referência será corrompida. É disso que trata a Web.
Os service workers melhoram progressivamente os sites por 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:
- Uma solicitação é feita para fazer o download do aplicativo.
- O download e a instalação do app acontecem.
- O app está pronto para uso e pode ser iniciado.
- O app é atualizado de acordo com as novas versões.
O ciclo de vida do service worker é semelhante, mas tem 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 de referência durante 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 da linha de execução principal.
Isso abre muitas possibilidades de interações do usuário com uma instância do Cache.
Enquanto o cache HTTP é influenciado por diretivas de armazenamento em cache especificadas em cabeçalhos HTTP,
a interface Cache é programável por meio de JavaScript.
Isso significa que o armazenamento de respostas em cache para solicitações de rede pode ser baseado 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 disponibilizá-los a partir do cache para cada solicitação seguinte.
- Armazene a marcação de página no cache, mas exiba-a apenas em cenários off-line.
- Veicular respostas desatualizadas para determinados recursos no cache, mas atualizá-las da rede em segundo plano.
- Transmita conteúdo parcial da rede e monte-o com um shell de app do cache para melhorar o desempenho perceptivo.
Cada uma delas é um exemplo de uma estratégia de armazenamento em cache. As estratégias de armazenamento em cache possibilitam experiências off-line e podem fornecer melhor desempenho ao evitar verificações de revalidação de alta latência de início rápido do cache HTTP. Antes de mergulhar no Workbox, haverá uma revisão de algumas estratégias de armazenamento em cache e códigos que as fazem funcionar.
Uma API assíncrona e orientada a eventos
A transferência de dados pela rede é inerentemente assíncrona. Leva tempo para solicitar um recurso, para um servidor responder a essa solicitação e para o download da resposta. O tempo envolvido é variado e indeterminado. Os service workers acomodam essa assincronia por meio de uma API orientada a eventos, usando callbacks para eventos como:
- Quando um service worker está em fase de instalação.
- Quando um service worker está em ativação.
- Quando um service worker detecta uma solicitação de rede.
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 despachadas é vital para fornecer a confiabilidade e a velocidade desejadas.
Fazer trabalho assíncrono em JavaScript envolve o uso de promessas.
Como as promessas também sustentam
async e await,
esses recursos JavaScript também podem ser usados para simplificar o código do service worker (e do Workbox!) e melhorar a experiência do desenvolvedor.
Pré-armazenamento em cache e armazenamento em cache no ambiente de execução
A interação entre um service worker e uma instância de Cache envolve dois conceitos distintos de armazenamento em cache:
armazenamento em cache em cache e armazenamento em cache no ambiente de execução.
Cada uma delas é fundamental para os benefícios que um service worker pode oferecer.
O pré-armazenamento em cache é o processo de armazenamento em cache de recursos antecipadamente,
normalmente durante a instalação de um service worker.
Com o pré-armazenamento em cache, os principais recursos estáticos e materiais necessários para o acesso off-line podem ser transferidos por download e armazenados em uma instância de Cache.
Esse tipo de armazenamento em cache também melhora a velocidade das páginas subsequentes que exigem os recursos pré-armazenados em cache.
Armazenamento em cache no ambiente de execução quando uma estratégia de armazenamento em cache é aplicada a recursos conforme eles são solicitados da rede durante o tempo de execução. Esse tipo de armazenamento em cache é útil porque garante o acesso off-line a páginas e ativos 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 semelhantes aos 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, depende dos recursos do dispositivo e do acesso à Internet de alta velocidade. Quanto mais JavaScript for usado, mais desafiador será criar sites rápidos que ofereçam experiências agradáveis para o usuário.
Os service workers são como os web workers, ou seja, todo o trabalho que eles fazem ocorre nas próprias linhas de execução. Isso significa que as tarefas dos service workers não vão competir por atenção com outras na linha de execução principal. Os Service Workers priorizam o usuário desde a concepção.
A estrada à frente
Esta documentação é apenas uma visão geral. Há mais alguns assuntos a serem abordados sobre os service workers antes de abordar o Workbox. Mas não se preocupe: se você entender bem os service workers, usar o Workbox será uma experiência mais fácil e produtiva.