0%
Inicio 9 Glossary Item 9 Service Workers
« Back to Glossary Index

Nivel Principiante

Imagina que tu navegador está en una cafetería (el sitio web). Para cada café que pide (una página o una imagen), tiene que ir hasta el mostrador (el servidor) a pedirlo. Un Service Worker es como si contrataras a un mesero que se queda en la mesa (tu computadora). Ahora, cada vez que pides un café que ya te ha traído antes, el mesero te lo da al instante sin tener que ir al mostrador. Además, puede seguir trayéndote cosas incluso si la cafetería cierra. Es un mesero invisible que hace que tu página sea súper rápida y funcione sin conexión a internet.

Nivel Intermedio

Un Service Worker es un tipo de Web Worker, un script de JavaScript que el navegador ejecuta en un hilo de fondo, separado del hilo principal que gestiona la interfaz de usuario. Su función más importante es actuar como un proxy programable entre el navegador y la red. Esto le permite interceptar las peticiones de red del navegador y decidir si debe ir a buscar el recurso a la red o si debe servirlo directamente desde la caché.

El uso de Service Workers es fundamental en las Progressive Web Apps (PWAs) para habilitar funcionalidades clave como:

  • Funcionalidad offline: Permite que la aplicación funcione incluso sin conexión a internet, sirviendo el contenido desde la caché.
  • Carga instantánea: Al servir recursos de la caché, la página se carga de forma casi instantánea en las visitas subsiguientes.
  • Notificaciones push: Permite enviar notificaciones a los usuarios incluso cuando no están usando el navegador.

Nivel Avanzado

Técnicamente, un Service Worker es un script que no tiene acceso al DOM y tiene un ciclo de vida propio que no está ligado a la vida de la página web. Se registra en el navegador para un origen específico y tiene varios estados: installing, installed, activating, activated y redundant. Se comunica con el hilo principal a través de la API postMessage().

Las APIs clave que utiliza un Service Worker son:

  • Fetch API: El Service Worker intercepta las peticiones de red utilizando el evento fetch. Es en este punto donde el desarrollador puede decidir qué hacer: servir una respuesta desde la caché (Cache API), ir a la red o generar una respuesta dinámica.
  • Cache API: Una API que permite almacenar y gestionar pares de peticiones y respuestas HTTP. El Service Worker puede almacenar recursos estáticos y dinámicos para que estén disponibles sin conexión.
  • Push API y Notifications API: Estas APIs permiten al Service Worker recibir notificaciones desde un servidor y mostrarlas al usuario, incluso si la página web está cerrada.

El Service Worker debe ejecutarse sobre un contexto HTTPS para garantizar la seguridad y la integridad de los datos, ya que podría interceptar peticiones sensibles. Su implementación es una parte crucial del SEO Técnico y la optimización del rendimiento web (WPO), ya que mejora las métricas de Core Web Vitals y la experiencia del usuario, especialmente en redes lentas o inestables.

« Volver al índice del glosario