0Pricing
Vue Academy · Aula

Estratégias de Service Worker

Cache primeiro, rede primeiro e obsoleto enquanto revalida — escolha por tipo de recurso.

Estratégias de Service Worker é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Visão geral das estratégias de armazenamento em cache

Um serviceWorker intercepta as solicitações de rede e decide se deve fornecer a resposta a partir do cache, da rede ou de ambos. O Workbox nomeia quatro estratégias principais, cada uma adequada a um tipo diferente de recurso.

CacheFirst

CacheFirst fornece a resposta a partir do cache e só acessa a rede quando não encontra uma cópia armazenada. É ideal para recursos que raramente mudam e têm hash no conteúdo, como fontes e imagens.

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst tenta acessar a rede primeiro e usa o cache como alternativa quando não há conexão ou quando ocorre um tempo limite. É ideal para respostas de API em que a atualidade é importante, mas o acesso sem conexão também é desejado.

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate devolve imediatamente a cópia armazenada no cache para obter velocidade, enquanto busca uma cópia atualizada em segundo plano para atualizar o cache. É excelente para pacotes de JS e CSS.

// return cache now, update cache in background

NetworkOnly e CacheOnly

Os dois extremos: NetworkOnly sempre busca o recurso na rede, sem armazenamento em cache, e CacheOnly fornece apenas conteúdo armazenado previamente no cache. Use-os para solicitações POST que não podem ser armazenadas em cache ou para recursos que devem estar estritamente armazenados previamente.

A matriz runtimeCaching

Na configuração do Workbox, runtimeCaching é uma matriz de regras. Cada regra corresponde a URLs de solicitações e atribui uma estratégia e um nome de cache.

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

Uma regra urlPattern

Cada regra tem um urlPattern (expressão regular ou função), um handler (o nome da estratégia) e options, como o nome do cache.

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

Armazenando recursos estáticos com CacheFirst

Faça as imagens e fontes corresponderem à regra e forneça-as com CacheFirst, pois as URLs com hash no conteúdo mudam quando o arquivo muda.

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

Armazenando pacotes de JS com StaleWhileRevalidate

Forneça imediatamente os pacotes de scripts e estilos a partir do cache enquanto os atualiza em segundo plano.

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

O plug-in de expiração

Os caches crescem sem limite quando não há restrições. A opção expiration limita a quantidade de entradas e sua idade máxima, removendo primeiro as mais antigas.

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

Armazenando respostas opacas em cache

Para respostas de API de outra origem, geralmente você adiciona cacheableResponse com os status permitidos, para que apenas respostas bem-sucedidas sejam armazenadas.

options: {
  cacheableResponse: { statuses: [0, 200] }
}

Verificação rápida

Qual estratégia é mais adequada para respostas de API que devem estar atualizadas, mas disponíveis sem conexão?

Recapitulação

As estratégias do Workbox correspondem aos tipos de recurso: CacheFirst para recursos estáticos, NetworkFirst para respostas de API e StaleWhileRevalidate para pacotes de JS/CSS. Defina-as na matriz runtimeCaching com um urlPattern, um handler e options, como o plug-in expiration, para limitar o tamanho do cache.

Perguntas Frequentes

A aula “Estratégias de Service Worker” é grátis?

Sim — o texto completo de “Estratégias de Service Worker” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Estratégias de Service Worker”?

Cache primeiro, rede primeiro e obsoleto enquanto revalida — escolha por tipo de recurso. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Estratégias de Service Worker”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do vite-plugin-pwa
  2. Estratégias de Service Worker
  3. Suporte offline e sincronização em segundo plano
  4. Notificações push em uma PWA Vue
← Voltar para Vue Academy