Os aplicativos da Web Progressive (PWAs) aproveitam várias técnicas para fornecer suporte offline, oferecendo aos usuários uma experiência perfeita, mesmo sem uma conexão com a Internet. Aqui está como eles fazem isso:
1. Trabalhadores de serviço: Esta é a pedra angular dos recursos offline da PWA. Os trabalhadores de serviços são scripts que são executados em segundo plano, independentemente da página da web, permitindo que eles interceptem solicitações de rede e lidam com eles mesmo quando o aplicativo não estiver aberto ativamente no navegador. Eles podem:
*
Ativos de cache: Os trabalhadores de serviço podem armazenar em cache ativos estáticos como HTML, CSS, JavaScript, Images e Fontes. Quando o usuário está offline, o trabalhador do serviço pode atender a esses ativos em cache diretamente do cache do navegador, impedindo que o aplicativo seja quebrado. Estratégias como cache somente, cache-primeiro, rede-primeiro e revalidados de stare-while fornecem diferentes níveis de controle sobre como os recursos em cache são usados.
*
lidar com solicitações de rede: O trabalhador do serviço pode interceptar solicitações de dados de APIs ou outros recursos de rede. Se o usuário estiver offline, poderá retornar respostas em cache. Se on -line, ele pode buscar os dados da rede e atualizar o cache.
*
Responda às notificações push: Os funcionários do serviço permitem notificações push, mesmo quando o aplicativo não está aberto, possibilitando informar o usuário sobre atualizações ou novo conteúdo, mesmo offline. A notificação em si será mostrada quando o usuário estiver online, no entanto.
2. IndexedDB: Esta é uma API de banco de dados do lado do cliente que permite que o PWAS armazene dados localmente no dispositivo do usuário. Isso é ideal para armazenar dados de aplicativos, preferências do usuário ou qualquer conteúdo dinâmico que precise persistir entre as sessões ou quando offline. Isso suplementa armazenando em cache armazenando dados específicos de aplicativos.
3. Estratégias de cache: O cache eficaz é crucial. As PWAs usam diferentes estratégias de cache para equilibrar conteúdo novo com disponibilidade offline. Estratégias como:
*
cache-primeiro: Sirva a resposta em cache primeiro. Apenas busque a rede se a resposta em cache estiver obsoleta ou ausente.
*
Rede-primeiro: Busque primeiro a rede. Cache a resposta para uso posterior.
*
Stale-while-revalidado: Sirva a resposta em cache enquanto busca simultaneamente uma nova da rede. Isso garante que o usuário sempre veja o conteúdo mais recente eventualmente, proporcionando uma experiência offline rápida.
4. Abordagem offline primeiro: Alguns PWAs são projetados com uma filosofia "offline-primeiro". Isso prioriza o acesso offline e considera a funcionalidade offline como o comportamento principal. O aplicativo funcionará como esperado offline e quaisquer recursos somente on-line são tratados como adições, não os requisitos.
Exemplo de implementação (conceitual usando o serviço de serviço): `` `JavaScript
// em seu trabalhador de serviço:
self.addeventListener ('install', (event) => {
Event.waituntil (
caches.open ('my-cache'). Então ((cache) => {
Retorne cache.addall ([
'/',
'/index.html',
'/styles.css',
'/script.js',
// ... outros ativos
]);
})
);
});
self.addeventListener ('busca', (evento) => {
Event.Randwith (
caches.match (event.request) .then ((resposta) => {
resposta de retorno || buscar (event.request); // Estratégia Cache-First
})
);
});
`` `
Este exemplo simples mostra como cache ativos estáticos. Estratégias mais complexas requerem consideração cuidadosa da estratégia de cache, gerenciamento de dados e lidar com possíveis conflitos entre respostas em cache e rede. A sofisticação da experiência offline dependerá da complexidade do aplicativo e das opções de implementação do desenvolvedor.
