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 HTML, CSS, JavaScript 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!!!
