Qué es Service Worker y porqué deberíamos utilizarlo

Service Worker

El mundo del desarrollo Web ha tenido muchas revoluciones a lo largo de su historia. La posibilidad de crear Aplicaciones Web que funcionen de manera offline y con la posibilidad de recibir notificaciones hoy en día es un realidad a partir del concepto de Progressive Web Apps (conocido por sus siglas PWA). Una de las capacidades que hace posible este éxito está basada en Service Worker. Una característica que desarrollaremos a continuación.

En primer lugar es importante destacar que el navegador Web, tal como lo conocemos, comprende JavaScript y para trabajar con hilos puede emplear Workers.

En el caso particular del Service Worker, es un script que puede trabajar como una especie de proxy entre nuestra aplicación Web y el contenido alojado en el servidor. En palabras sencillas, uno de sus usos más frecuentes es permitirnos manejar un caché y posibilitar una experiencia offline al usuario que ya haya visitado el sitio. Algo muy útil para garantizar que la aplicación Web se mantenga funcional aunque pierda conexión.

Los Service Worker tienen un ciclo de vida o etapas. El primer paso es registrarlo desde la aplicación principal. Un ejemplo:

navigator.serviceWorker.register('sw.js');

Es importante destacar que el archivo sw.js debe existir en nuestro dominio (podremos indicar la ruta, además del nombre del archivo, si no está en la misma ubicación que el archivo que lo registra). Siguiendo nuestro ejemplo, en el archivo sw.js escribiremos los códigos que veremos a continuación para instalar, activar y realizar el procedimiento de fetch.

El paso siguiente, entonces, es instalar el Service Worker, con un código como el siguiente:

self.addEventListener('install', function(event) {
// Código para el proceso de instalación
});

El proceso que sigue es la activación:

self.addEventListener('activate', function(event) {
// Código para activación del Service Worker
});

Y nos queda para el evento fetch el siguiente código:

self.addEventListener('fetch', function(event) {
// Código para realizar el proceso de fetch.
});

¿Cómo podemos verificar si Service Worker es compatible con el navegador del usuario? Muy simple, con un código como el que vemos a continuación:

if ('serviceWorker' in navigator) {
//Aquí se coloca la registración del Service Worker
}

Es importante destacar que, ademas de permitir una experiencia offline, con el Service Worker también podremos utilizar sincronización en segundo plano (Background Sync) y notificaciones Push (con Push API).

Para verificar si nuestro ejemplo funciona correctamente y observar la actividad de nuestro Service Worker, podremos recurrir a las herramientas para desarrolladores (DevTools) de Google Chrome. En la solapa Application, encontraremos todo lo referido a Service Worker.

Finalmente, vale la pena señalar que en cada sitio solo podremos tener un Service Worker, que se ejecuta de manera separada del hilo principal de nuestra aplicación Web y desde el cual no tendremos acceso a algunas características (por ejemplo el DOM del documento principal).

Para saber más sobre Progressive Web Apps y como utilizar Service Worker me pueden contactar via Web o Twitter.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.