Cómo integrar trabajadores de servicios en aplicaciones Next.js

Los trabajadores de servicios son scripts que se ejecutan en segundo plano para proporcionar potentes capacidades de almacenamiento en caché y otras características a las aplicaciones web modernas.

Estas características brindan la experiencia fluida y fácil de usar de las aplicaciones nativas al navegador web.

Los trabajadores de servicios son un componente fundamental en la creación de Progressive Web Apps (PWA).

Comprender a los trabajadores de servicios

Un trabajador de servicios es un tipo de Trabajador web de JavaScript que se ejecuta en segundo plano, separado del hilo principal de JavaScript, para que no bloquee. Esto significa que no causa retrasos ni interrupciones en la interfaz de usuario de la aplicación ni en la interacción del usuario con ella.

Los trabajadores de servicios funcionan como servidores proxy, ubicados entre las aplicaciones web y la red. Pueden interceptar solicitudes y respuestas, almacenar en caché recursos y brindar soporte fuera de línea. Esto ayuda a garantizar que las aplicaciones web se sientan más fluidas y fáciles de usar, incluso cuando el usuario no está en línea.

Aplicaciones clave para trabajadores de servicios

Existen varias aplicaciones para trabajadores de servicios. Incluyen:

• PWA: Los trabajadores de servicios brindan un gran poder a las aplicaciones web progresivas. Realizan solicitudes de red personalizadas, notificaciones automáticas, soporte fuera de línea y carga rápida.
• Almacenamiento en caché: Los trabajadores del servicio pueden almacenar los activos de la aplicación (imágenes, código JavaScript y archivos CSS) en el almacenamiento caché del navegador. Esto permite que el navegador los recupere de su caché en lugar de recuperarlos del servidor remoto a través de la red. Como resultado, el contenido se carga más rápido, lo que resulta especialmente útil para usuarios con conexiones a Internet lentas o poco fiables.
• Sincronización en segundo plano: Los trabajadores del servicio pueden sincronizar datos y ejecutar otras tareas en segundo plano, incluso cuando el usuario no interactúa activamente con la aplicación o cuando la aplicación no está abierta en el navegador.

Integración de trabajadores de servicios en aplicaciones Next.js

Antes de profundizar en el código, es útil comprender cómo trabajan los trabajadores de servicios. Hay dos fases clave en el uso de trabajadores de servicios: registro y activación.

Durante la primera fase, el navegador registra al trabajador del servicio. He aquí un ejemplo sencillo:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

El código primero verifica si el navegador admite trabajadores de servicios, lo que hacen todos los navegadores web modernos. Si este soporte existe, se procede a registrar un trabajador de servicio ubicado en la ruta del archivo especificada.

En la fase de activación, debe instalar y activar un trabajador de servicio escuchando el instalar y activar eventos usando Oyentes de eventos de JavaScript. Así es como puedes lograr esto:

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

Puede incluir este código inmediatamente después del proceso de registro. Debería ejecutarse inmediatamente después de que el proceso de registro del trabajador del servicio sea exitoso.

Puedes encontrar el código de este proyecto en su GitHub repositorio.

Crear un proyecto Next.js

Para comenzar, ejecute este comando para aplicar scaffolding a un proyecto Next.js localmente:

npx create-next-app next-project

Agregar un trabajador de servicio a una aplicación Next.js implica los siguientes pasos:

1. Registre un trabajador de servicio en el entorno de alcance global.
2. Cree un archivo JavaScript de trabajador de servicio en el directorio público.

Agregar un trabajador de servicio

Primero, registre un trabajador de servicio. Actualizar el src/pages/_app.js archivo de la siguiente manera. Incluir el código en este archivo garantiza que el trabajador del servicio se registre cuando se carga la aplicación y tenga acceso a todos los activos de la aplicación.

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} />;
} 

El usoEfecto El gancho se activa cuando se monta el componente. Como en el ejemplo anterior, el código primero verifica si el navegador del usuario admite trabajadores de servicio.

Si el soporte existe, registra el script del trabajador del servicio ubicado en la ruta del archivo especificada y especifica su alcance como "/”. Esto significa que el trabajador del servicio tiene control de todos los recursos de la aplicación. Puede proporcionar un alcance más granular si lo desea, por ejemplo, "/products”.

Si el registro es exitoso, registra un mensaje de éxito, junto con su alcance. Si hay un error durante el proceso de registro, el código lo detectará y registrará un mensaje de error.

Instalar y activar el trabajador de servicio

Agregue el siguiente código a un nuevo archivo, publico/servicio-trabajador.js.

const installEvent = () => {
 self.addEventListener('install', () => {
console.log('service worker installed!!!');
 });
};
installEvent();

const activateEvent = () => {
 self.addEventListener('activate', () => {
console.log('service worker activated!!!');
 });
};
activateEvent();

Para comprobar si el trabajador del servicio se ha registrado, instalado y activado correctamente, inicie el servidor de desarrollo y abra su aplicación en el navegador.

npm run dev

Abierto Herramientas para desarrolladores de Chrome ventana (o el equivalente de su navegador) y navegue hasta la Solicitud pestaña. Bajo la Trabajadores de servicios sección, debería ver el trabajador de servicio que ha registrado.

Con el trabajador del servicio registrado, instalado y activado correctamente, puede implementar varias funciones como almacenamiento en caché, sincronización en segundo plano o enviando notificaciones push.

Almacenamiento en caché de recursos con trabajadores de servicio

El almacenamiento en caché de los activos de la aplicación en el dispositivo del usuario puede mejorar el rendimiento al permitir un acceso más rápido, especialmente en situaciones con conexiones a Internet poco confiables.

Para almacenar en caché los activos de la aplicación, incluya el siguiente código en el trabajador-de-servicio.js archivo.

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;
 });
 });
 })
 );
});

Cuando un usuario accede por primera vez a la página de inicio, este código verifica si hay una respuesta almacenada en caché para la solicitud en el caché. Si existe una respuesta almacenada en caché, el servicio la devuelve al cliente.

Si no existe una respuesta almacenada en caché, el trabajador del servicio recupera el recurso del servidor a través de la red. Sirve la respuesta al cliente y la almacena en caché para futuras solicitudes.

Para ver los activos almacenados en caché, abra la pestaña Aplicación en las herramientas de desarrollador. Bajo la Almacenamiento en caché sección, debería ver una lista de los activos almacenados en caché. También puedes consultar el Desconectado opción bajo el Trabajador del servicio y vuelva a cargar la página para simular una experiencia fuera de línea.

Ahora, una vez que visite la página de inicio, el navegador proporcionará recursos almacenados en el almacenamiento caché en lugar de intentar realizar solicitudes de red para recuperar datos.

Uso de trabajadores de servicios para mejorar el rendimiento

Los trabajadores de servicios son una herramienta poderosa para mejorar el rendimiento de las aplicaciones Next.js. Pueden almacenar en caché recursos, interceptar solicitudes y brindar soporte fuera de línea, todo lo cual puede mejorar la experiencia del usuario.

Sin embargo, es importante tener en cuenta que los trabajadores de servicios también pueden ser complejos de implementar y gestionar. Es importante considerar cuidadosamente los posibles beneficios y desventajas de los trabajadores de servicios antes de utilizarlos.