Como integrar Service Workers em aplicativos Next.js

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).

Compreendendo os trabalhadores de serviço

Um trabalhador de serviço é um tipo de Trabalhador web JavaScript que é 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: Os 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: cadastro 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 o instalar e ativar eventos 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:

1. Registre um service worker no ambiente de escopo global.
2. Crie um arquivo JavaScript do service worker no diretório público.

Adicionando um Service Worker

Primeiro, registre um prestador de serviço. Atualize o src/pages/_app.js arquivo da seguinte forma. 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';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

O useEfeito o gancho é 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, “/products”.

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 seguinte código a um novo arquivo, público/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 sucesso, inicie o servidor de desenvolvimento e abra seu aplicativo no navegador.

npm run dev

Abrir Ferramentas para desenvolvedores do Chrome janela (ou equivalente do seu navegador) e navegue até o Aplicativo aba. Debaixo de Trabalhadores de serviço seção, você deverá ver o service worker que registrou.

Com o service worker registrado, instalado e ativado com sucesso, você pode implementar diversas funções como cache, sincronização em segundo plano ou enviando 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 seguinte código no arquivo service-worker.js arquivo.

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. Debaixo de Armazenamento em cache seção, você deverá ver uma lista dos ativos em cache. Você também pode verificar o desligada opção sob o Trabalhador de serviço seção e recarregue 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.