Serving PWA

PWA
Tempo de leitura: 3 minutos

Serving PWA: As Progressive Web Apps (PWAs) oferecem uma experiência de usuário excepcional, combinando a melhor parte da web com as funcionalidades de aplicativos nativos. Uma das chaves para o sucesso de uma PWA é a otimização da entrega de conteúdo, ou seja, o serving.

Neste artigo, exploraremos em detalhes o conceito de serving em PWAs, com um foco especial no uso de service workers para gerenciar o cache e fornecer uma experiência offline robusta.

Evento de Busca

O coração do serving em PWAs é o evento fetch. Quando um navegador solicita um recurso (HTML, CSS, JavaScript, imagem, etc.), o service worker intercepta essa solicitação através do evento fetch. Isso permite que o service worker tome decisões sobre como responder à requisição, seja buscando o recurso na rede, servindo-o do cache ou combinando ambas as estratégias.

JavaScript

self.addEventListener('fetch', (event) => {
  // Lógica para responder à requisição
});

Respondendo a uma Solicitação

Ao interceptar uma solicitação, o service worker deve decidir como responder. As opções mais comuns são:

  • Servir do cache: Se o recurso já está armazenado no cache, ele pode ser servido diretamente, proporcionando um carregamento mais rápido.
  • Buscar na rede: Se o recurso não está no cache, o service worker pode buscar na rede e armazenar a resposta no cache para futuras solicitações.
  • Combinar cache e rede: O service worker pode combinar ambas as estratégias, servindo o recurso do cache enquanto busca uma versão mais recente na rede em segundo plano.

Como Criar Respostas

Para criar uma resposta, o service worker retorna uma Promise que resolve para uma Response. Essa Response pode ser criada a partir de vários fontes:

  • Fetch: Buscar o recurso na rede.
  • Cache: Servir o recurso do cache.
  • Resposta personalizada: Criar uma resposta personalizada, como uma página de erro ou um conteúdo gerado dinamicamente.

JavaScript

event.respondWith(
  caches.match(event.request)
    .then((response) => {
      return response || fetch(event.request);
    })
);

Respondendo Usando Cache

Para servir um recurso do cache, o service worker utiliza o método match() do objeto caches. Esse método retorna uma Promise que resolve para a Response correspondente, se encontrada.

JavaScript

event.respondWith(
  caches.match(event.request)
    .then((response) => {
      return response;
    })
);

Estratégias para Armazenar em Cache

Existem diversas estratégias para armazenar recursos em cache:

  • Cache-first: O recurso é sempre servido do cache, mesmo que uma versão mais recente esteja disponível na rede.
  • Network-first: O recurso é sempre buscado na rede, e a resposta é armazenada no cache para futuras solicitações.
  • Cache-only: O recurso é sempre servido do cache, mesmo que não haja conexão com a internet.
  • Network-only: O recurso é sempre buscado na rede, e o cache não é utilizado.

Armazenar em Cache Primeiro (Cache-First)

JavaScript

event.respondWith(
  caches.match(event.request)
    .then((response) => {
      return response || fetch(event.request);
    })
);

Vantagens:

  • Carregamentos mais rápidos.
  • Funcionalidade offline.

Desvantagens:

  • Pode servir recursos desatualizados.

Rede Primeiro (Network-First)

JavaScript

event.respondWith(
  fetch(event.request)
    .then((response) => {
      caches.open('my-cache')
        .then((cache) => {
          cache.put(event.request, response.clone());
        });
      return response;
    })
    .catch(() => {
      return caches.match(event.request);
    })
);

Vantagens:

  • Sempre serve a versão mais recente do recurso.

Desvantagens:

  • Pode causar atrasos no carregamento inicial.

Somente Cache

JavaScript

event.respondWith(
  caches.match(event.request)
    .then((response) => {
      return response;
    })
);

Vantagens:

  • Funcionalidade offline completa.

Desvantagens:

  • Não permite que os usuários vejam as atualizações.

Somente Rede

JavaScript

event.respondWith(
  fetch(event.request)
);

Vantagens:

  • Sempre serve a versão mais recente do recurso.

Desvantagens:

  • Não funciona offline.

Atualizando Recursos

Para atualizar os recursos no cache, você pode utilizar diferentes estratégias:

  • Excluir o cache antigo e criar um novo: Ideal quando há muitas mudanças.
  • Adicionar novos recursos ao cache existente: Eficiente quando há poucas mudanças.
  • Utilizar uma política de cache: Definir um tempo de vida para os recursos no cache.

Conclusão

Serving PWA: O serving em PWAs é um aspecto fundamental para garantir uma experiência de usuário rápida e confiável. Ao entender as diferentes estratégias de cache e como utilizar o evento fetch, você pode criar PWAs que funcionam offline, carregam rapidamente e oferecem uma experiência semelhante a um aplicativo nativo.

Se você está buscando uma maneira de melhorar o desempenho e o engajamento do seu site, considere transformar seu site em um PWA. Com as ferramentas e frameworks disponíveis atualmente, criar um PWA é mais fácil do que nunca.

Para criar PWAs mais complexos e personalizados, é recomendado aprofundar seus conhecimentos em nossos artigos completos em HTMLCSSJavaScript e as tecnologias relacionadas a PWAs.

E para você validar seus códigos, para que o back-end do seu PWA funcione sem problemas, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem com potência de verdade!!!

Author: Thiago Rossi

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *