Service workers são scripts executados em segundo plano para fornecer recursos avançados de cache e outros recursos para aplicativos da Web modernos.
Esses recursos trazem a experiência perfeita e fácil de usar de aplicativos nativos para o navegador da web.
Os service workers são um componente fundamental na criação de Progressive Web Apps (PWAs).
últimas postagens
Compreendendo os trabalhadores de serviço
Um service Worker é um tipo de Web Worker JavaScript executado em segundo plano, separado do thread JavaScript principal, para que não bloqueie. Isso significa que não causa atrasos ou interrupções na interface do usuário do aplicativo ou na interação do usuário com ele.
Os service workers funcionam como servidores proxy – situados entre os aplicativos da web e a rede. Eles podem interceptar solicitações e respostas, armazenar recursos em cache e fornecer suporte offline. Isso ajuda a garantir que os aplicativos da web sejam mais integrados e fáceis de usar, mesmo quando o usuário não estiver online.
Principais aplicações para prestadores de serviços
Existem vários aplicativos para trabalhadores de serviços. Eles incluem:
- PWAs: Service workers fornecem grande poder aos Progressive Web Apps. Eles realizam solicitações de rede personalizadas, notificações push, suporte offline e carregamento rápido.
- Cache: os service workers podem armazenar os ativos do aplicativo (imagens, código JavaScript e arquivos CSS) no armazenamento em cache do navegador. Isso permite que o navegador os recupere do cache, em vez de buscá-los no servidor remoto pela rede. Como resultado, o conteúdo carrega mais rapidamente, o que é particularmente útil para usuários com conexões de Internet lentas ou não confiáveis.
- Sincronização em segundo plano: os service workers podem sincronizar dados e executar outras tarefas em segundo plano, mesmo quando o usuário não está interagindo ativamente com o aplicativo ou quando o aplicativo não está aberto no navegador.
Integrando Service Workers em aplicativos Next.js
Antes de mergulhar no código, é útil entender como funcionam os service workers. Existem duas fases principais no uso de service workers: registro e ativação.
Durante a primeira fase, o navegador registra o service worker. Aqui está um exemplo simples:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};registerServiceWorker();
O código primeiro verifica se o navegador oferece suporte a service workers, o que todos os navegadores modernos fazem. Se esse suporte existir, ele registrará um service worker localizado no caminho de arquivo especificado.
Na fase de ativação, você precisa instalar e ativar um service worker ouvindo os eventos de instalação e ativação usando ouvintes de eventos JavaScript. Aqui está como você pode conseguir isso:
registration.addEventListener("install", () => {
console.log("Service worker installed");
});registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Você pode incluir este código logo após o processo de registro. Ele deve ser executado logo após o sucesso do processo de registro do service worker.
Você pode encontrar o código deste projeto em seu GitHub repositório.
Crie um projeto Next.js
Para começar, execute este comando para criar um scaffold de um projeto Next.js localmente:
npx create-next-app next-project
Adicionar um service worker a um aplicativo Next.js envolve as seguintes etapas:
Adicionando um Service Worker
Primeiro, registre um prestador de serviço. Atualize o arquivo src/pages/_app.js da seguinte maneira. A inclusão do código neste arquivo garante que o service worker se registre quando o aplicativo for carregado e tenha acesso a todos os ativos do aplicativo.
import { useEffect } from 'react';export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
O gancho useEffect é acionado quando o componente é montado. Como no exemplo anterior, o código primeiro verifica se o navegador do usuário oferece suporte a service workers.
Se o suporte existir, ele registra o script do service worker localizado no caminho do arquivo especificado e especifica seu escopo como “/”. Isso significa que o service worker tem controle de todos os recursos do aplicativo. Você pode fornecer um escopo mais granular se desejar, por exemplo, “/produtos”.
Se o registro for bem-sucedido, ele registrará uma mensagem de sucesso, juntamente com seu escopo. Se houver um erro durante o processo de registro, o código irá detectá-lo e registrar uma mensagem de erro.
Instalar e ativar o Service Worker
Adicione o código a seguir a um novo arquivo, public/service-worker.js.
const installEvent = () => {
self.addEventListener('install', () => {
console.log('service worker installed!!!!');
});
};installEvent();
const activateEvent = () => {
self.addEventListener('activate', () => {
console.log('service worker activated!!!');
});
};
activateEvent();
Para testar se o service worker foi registrado, instalado e ativado com êxito, inicie o servidor de desenvolvimento e abra seu aplicativo no navegador.
npm run dev
Abra a janela Ferramentas do desenvolvedor do Chrome (ou equivalente do seu navegador) e navegue até a guia Aplicativo. Na seção Service Workers, você deverá ver o service worker que registrou.
Com o service worker registrado, instalado e ativado com sucesso, você pode implementar várias funções como armazenamento em cache, sincronização em segundo plano ou envio de notificações push.
Armazenando Recursos em Cache com Service Workers
O armazenamento em cache de ativos de aplicativos no dispositivo do usuário pode melhorar o desempenho, permitindo acesso mais rápido, especialmente em situações com conexões de Internet não confiáveis.
Para armazenar em cache os ativos do aplicativo, inclua o código a seguir no arquivo service-worker.js.
const cacheName="test-cache";self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Quando um usuário acessa a página inicial pela primeira vez, esse código verifica se há uma resposta em cache para a solicitação no cache. Se existir uma resposta em cache, o serviço a retornará ao cliente.
Se não existir nenhuma resposta em cache, o service worker busca o recurso do servidor pela rede. Ele fornece a resposta ao cliente e a armazena em cache para solicitações futuras.
Para visualizar os ativos armazenados em cache, abra a guia Aplicativo nas ferramentas do desenvolvedor. Na seção Armazenamento em cache, você deverá ver uma lista dos ativos armazenados em cache. Você também pode marcar a opção Offline na seção Service Worker e recarregar a página para simular uma experiência offline.
Agora, depois de visitar a página inicial, o navegador servirá recursos armazenados no cache em vez de tentar fazer solicitações de rede para buscar dados.
Usando Service Workers para melhorar o desempenho
Service workers são uma ferramenta poderosa para melhorar o desempenho de aplicativos Next.js. Eles podem armazenar recursos em cache, interceptar solicitações e fornecer suporte offline, o que pode melhorar a experiência do usuário.
No entanto, é importante observar que os prestadores de serviços também podem ser complexos de implementar e gerenciar. É importante considerar cuidadosamente os potenciais benefícios e desvantagens dos prestadores de serviços antes de usá-los.