Cómo los trabajadores web y los trabajadores de servicio pueden mejorar el rendimiento de tu sitio y cuándo usar un trabajador web en lugar de un trabajador de servicio
En esta descripción general, se explica cómo los trabajadores web y los trabajadores de servicio pueden mejorar el rendimiento de tu sitio web y cuándo usar un trabajador web en lugar de un trabajador de servicio. Consulta el resto de esta serie para ver patrones específicos de comunicación entre ventanas y trabajadores del servicio.
Cómo los trabajadores pueden mejorar tu sitio web
El navegador usa un solo subproceso (el subproceso principal) para ejecutar todo el código JavaScript de una página web, así como para realizar tareas como renderizar la página y realizar la recolección de elementos no utilizados. Ejecutar código JavaScript excesivo puede bloquear el subproceso principal, lo que retrasa el navegador para que realice estas tareas y genera una experiencia del usuario deficiente.
En el desarrollo de aplicaciones para iOS y Android, un patrón común para garantizar que el subproceso principal de la app permanezca libre para responder a los eventos del usuario es transferir las operaciones a subprocesos adicionales. De hecho, en las versiones más recientes de Android, bloquear el subproceso principal durante demasiado tiempo hace que la app falle.
En la Web, JavaScript se diseñó en torno al concepto de un solo subproceso y carece de las capacidades necesarias para implementar un modelo de subprocesos múltiples como el que tienen las apps, como la memoria compartida.
A pesar de estas limitaciones, se puede lograr un patrón similar en la Web con el uso de trabajadores para ejecutar secuencias de comandos en subprocesos en segundo plano, lo que les permite realizar tareas sin interferir en el subproceso principal. Los trabajadores son un alcance de JavaScript completo que se ejecuta en un subproceso independiente, sin memoria compartida.
En esta publicación, aprenderás sobre dos tipos diferentes de trabajadores (trabajadores web y trabajadores de servicio), sus similitudes y diferencias, y los patrones más comunes para usarlos en sitios web de producción.
Web Workers y service workers
Similitudes
Los trabajadores web y los trabajadores de servicio son dos tipos de trabajadores disponibles para los sitios web. Tienen algunas características en común:
- Ambos se ejecutan en un subproceso secundario, lo que permite que el código JavaScript se ejecute sin bloquear el subproceso principal ni la interfaz de usuario.
- No tienen acceso a los objetos
WindowniDocument, por lo que no pueden interactuar directamente con el DOM y tienen acceso limitado a las APIs del navegador.
Diferencias
Se podría pensar que la mayoría de las tareas que se pueden delegar a un trabajador web se pueden realizar en un trabajador de servicio y viceversa, pero hay diferencias importantes entre ellos:
- A diferencia de los trabajadores web, los trabajadores del servicio te permiten interceptar solicitudes de red (a través del evento
fetch) y escuchar eventos de la API de Push en segundo plano (a través del eventopush). - Una página puede generar varios trabajadores web, pero un solo service worker controla todas las pestañas activas dentro del alcance con el que se registró.
- La vida útil del trabajador web está estrechamente vinculada a la pestaña a la que pertenece, mientras que el ciclo de vida del trabajador de servicio es independiente de ella. Por esa razón, cerrar la pestaña en la que se ejecuta un trabajador web lo finalizará, mientras que un trabajador de servicio puede seguir ejecutándose en segundo plano, incluso cuando el sitio no tenga ninguna pestaña activa abierta.
Casos de uso
Las diferencias entre ambos tipos de trabajadores sugieren en qué situaciones se podría querer usar uno o el otro:
Los casos de uso de los trabajadores web suelen estar relacionados con la transferencia de trabajo (como cálculos pesados) a un subproceso secundario para evitar bloquear la IU.
- Ejemplo: El equipo que creó el videojuego PROXX quería dejar el subproceso principal lo más libre posible para controlar las entradas del usuario y las animaciones. Para lograrlo, usaron trabajadores web para ejecutar la lógica del juego y el mantenimiento del estado en un subproceso independiente.
Por lo general, las tareas de los trabajadores de servicio están más relacionadas con actuar como un proxy de red, controlar tareas en segundo plano y elementos como el almacenamiento en caché y el modo sin conexión.
Ejemplo: En una PWA de podcast, se podría permitir que los usuarios descarguen episodios completos para escucharlos sin conexión. Para ello, se puede usar un trabajador de servicio y, en particular, la API de Background Fetch. De esta manera, si el usuario cierra la pestaña mientras se descarga el episodio, no se tiene que interrumpir la tarea.
Herramientas y bibliotecas
La comunicación entre ventanas y trabajadores se puede implementar con diferentes APIs de nivel inferior. Afortunadamente, existen bibliotecas que abstraen este proceso y se ocupan de los casos de uso más comunes. En esta sección, veremos dos de ellos que se encargan de la ventana a los trabajadores web y a los trabajadores de servicio, respectivamente: Comlink y Workbox.
Comlink
Comlink es una biblioteca pequeña (1.6 K) de RPC que se encarga de muchos detalles subyacentes cuando se compilan sitios web que usan Web Workers. Se usó en sitios web como PROXX y Squoosh. Puedes encontrar un resumen de sus motivaciones y muestras de código aquí.
Workbox
Workbox es una biblioteca popular para compilar sitios web que usan trabajadores del servicio. Empaqueta un conjunto de prácticas recomendadas sobre temas como el almacenamiento en caché, la sincronización en segundo plano, etc. El módulo workbox-window proporciona una forma conveniente de intercambiar mensajes entre el trabajador del servicio y la página.
Próximos pasos
El resto de esta serie se enfoca en los patrones de comunicación de ventanas y trabajadores del servicio:
- Guía de almacenamiento en caché imperativo: Llama a un servicio de trabajo desde la página para almacenar recursos en caché con anticipación (p.ej., en situaciones de precarga).
- Actualizaciones de transmisión: Llamar a la página desde el trabajador de servicio para informar sobre actualizaciones importantes (p. ej., que hay una versión nueva del sitio web disponible)
- Comunicación bidireccional: Delega una tarea a un trabajador de servicio (p.ej., una descarga pesada) y mantén a la página informada sobre el progreso.
Para ver patrones de comunicación entre ventanas y trabajadores web, consulta Cómo usar trabajadores web para ejecutar JavaScript fuera del subproceso principal del navegador.