Trabajador de servicio en ReactJS

1. ¿Qué es el trabajador de servicio de React?
2. Funciones de los trabajadores de servicios
3. Cómo activar los trabajadores del servicio React
4. Configuración del trabajador de servicio
5. Conclusión

Cuando nuestros teléfonos están desconectados y aún podemos recibir mensajes en nuestras aplicaciones, este es el trabajo de un trabajador de servicio.

Un ejemplo perfecto es la aplicación móvil biblia; una vez que se acabe el tiempo asignado, el usuario recibirá un versículo de memoria diario de la aplicación llamado notificación de inserción. La aplicación de Instagram hace lo mismo, estamos desconectados, pero aún recibimos notificaciones de la aplicación.

Afortunadamente, React ha inyectado esta función en su marco, y este artículo nos llevará a través de todo lo que necesitamos saber sobre el trabajador del servicio.

¿Qué es el trabajador de servicio de React?

Los trabajadores de servicio son activos de JavaScript especializados que mejoran los sitios web existentes al actuar como un enlace entre los navegadores web y los servidores web.

Sus funciones mejoran la confiabilidad de un sitio web al proporcionar acceso sin conexión al sitio web y aumentar el rendimiento general de la página web; esto se debe a que algunos trabajos en la página web están sujetos a un segundo plano, lo que hace que la página web funcione con elementos vitales.

Cuando está desconectado y el usuario aún puede desplazarse por el sitio web, ese es el trabajo manual de los trabajadores del servicio.

Los trabajadores del servicio solo pueden ejecutarse en HTTPS a menos que se ejecuten en localhost y, además, están vinculados a una página web en particular; son constantemente reutilizables a medida que los usuarios cambian de una página a otra. Se debe tener en cuenta el estado del trabajador del servicio porque una vez que se apaga, deja de retener información.

Funciones de los trabajadores de servicios

1. Los trabajadores de servicios pueden almacenar en caché aspectos clave de un sitio web; esto lo hace más ligero (se carga más rápido), lo que resulta en un mejor rendimiento del sitio web.
2. Habilitan las API de notificaciones y push, funciones que normalmente no están disponibles con las tecnologías web tradicionales.
3. Con la disponibilidad de los trabajadores del servicio, incluso cuando los usuarios pierden la funcionalidad de Internet, aún pueden usar la aplicación normalmente. Esto se debe a que los trabajadores del servicio han ayudado a almacenar en caché partes clave del sitio web.
4. Las acciones realizadas cuando la aplicación está fuera de línea se pueden sincronizar en segundo plano cuando Internet se restablece por completo.

Cómo activar los trabajadores del servicio React

Un trabajador de servicio se genera de forma predeterminada cuando usamos create-react-app para crear un nuevo proyecto React. Encontraremos el archivo serviceWorker.js en la carpeta src del proyecto.

Pero el trabajador de servicio no es funcional desde el primer momento; tendremos que configurarlo.

Necesitamos registrar al trabajador del servicio; navegaremos hasta el archivo src/index.js y buscaremos esta línea serviceWorker.unregister(); y cámbielo a serviceWorker.register();.

El registro del trabajador de servicio también le permite volverse funcional y, una vez que se crea la versión de producción de la aplicación React, el trabajador de servicio se habilita junto con ella.

Configuración del trabajador de servicio

Cuando creamos la aplicación React, el service-worker.js, por defecto, almacena en caché los contenidos directamente asociados con la página web; un ejemplo es un video incrustado en la página web. Tendremos que crear un nuevo archivo, custom-service-worker.js, y luego editar el registrar() para cargar el nuevo archivo que creamos.

En el archivo serviceWorker.js, buscaremos el detector de eventos load() alrededor de la línea 34 y le agregaremos nuestro archivo personalizado, como se muestra a continuación.

window.addEventListener('load', () => {
  const swUrl = `${process.env.PUBLIC_URL}/custom-service-
worker.js`;
  ...
}

Una vez hecho esto, actualizaremos el archivo package.json a continuación.

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

Ahora necesitaremos instalar el complemento Workbox de Google; usamos npm install --save-dev workbox-build. El complemento de la caja de trabajo es útil para integrar fácilmente funciones como la sincronización en segundo plano en el trabajador del servicio.

A continuación, crearemos un archivo de configuración para indicarle a Create React App (CRA) que inserte el trabajador de servicio personalizado recién creado, como se muestra a continuación.

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = function override(config, env) {
  config.plugins = config.plugins.map((plugin) => {
    if (plugin.constructor.name === 'GenerateSW') {
      return new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/custom-service-worker.js',
        swDest: 'service-worker.js'
      });
    }
    return plugin;
  });
  return config;
};

Por último, crearemos el trabajador personalizado para almacenar en caché un directorio en particular, como se muestra a continuación.

workbox.routing.registerRoute(
    new RegExp('/path/to/cache/directory/'), workbox.strategies.NetworkFirst());
workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

Una vez que hayamos terminado con esta parte, podemos construir la aplicación.

Conclusión

Las funciones que ofrecen los trabajadores de servicios son ideales para que las aplicaciones web funcionen sin problemas y, con el tiempo, se utilizarán para crear algunas funciones nuevas y emocionantes que harán que las aplicaciones web funcionen incluso mejor de lo que son ahora.