En este artículo vamos a continuar hablando de características de los Service Workers, en el marco del Manual de Progressive Web Apps.

Como hemos visto anteriormente, los Service Worker de las PWA son la mejor opción para agregar capacidades especiales a nuestras WebApp. Son uno de los pilares fundamentales que permiten producir Apps que se comportan como Nativas cuando son instaladas desde un Móvil. Todo ello, recordemos, sin la necesidad de acceder a ninguna tienda de aplicaciones, como App Store o Google Play Store.

Los Service Worker permiten agregar una gama de nueva funcionalidad, básicamente gracias a dos APIs el CACHE API y el Fetch API. En esta oportunidad nos dedicaremos a conocer el Fetch API.

Llamadas Asíncronas

Si llevas un cierto tiempo en el mundo del desarrollo WEB, sabrás que el principal medio para realizar llamadas a servidores y permitir la actualización de partes de un página, sin recargar todo su contenido por completo, era XMLHttpRequest, algo así:

const xhreq = new XMLHttpRequest();
xhreq.open('GET', url);
xhreq.responseType = 'json';
xhreq.onload = () => { console.log(xhreq.response); };
xhreq.onerror = () => { console.error("Ops!"); };
xhreq.send();

Pero tiene algunas desventajas como el hecho de que solo podíamos traer básicamente texto y objetos JSON.

La Web evolucionó y cada vez se hizo necesario más y mejores herramientas y es por eso que se han construido nuevas APIs que nos ayudaran en nuestro camino por otorgar la mejor experiencia a nuestros usuarios como es el caso de Fetch.

Fetch

Fetch API es una nueva interfaz Web la cual busca simplificar a XMLHttpRequest y proveer más características que faciliten la búsqueda de recursos a través de la red.

Su uso se ve así.

var myImage = document.querySelector('img');

main.js

fetch('someimage.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

En este pequeño ejemplo hemos utilizado fetch() para traer un elemento de la red llamado someimage.jpg esperamos la respuesta manejandola como un blob() y una vez tengamos la respuesta la procesamos para ser utilizada en un elemento <img/>

Como puedes observar funciona como una promesa y permite una gestión de la respuesta realmente fácil. Además, gracias sus objetos Request y Response vamos a poder tener buen control sobre las peticiones que interceptamos en la red.

Puedes ver su compatibilidad aquí.

Usándolo en el Service Worker

Ahora vamos a utilizar fetch para hacer una funcionalidad en nuestra PWA. Para ello vamos a trabajar sobre un evento de nuestro service worker, con el objetivo de responderle a nuestro usuario con el contenido de caché o el contenido de la red.

sw.js

self.addEventListener(‘fetch’, function(e){
	e.respondWith(
		caches.match(e.request).then(function(response){
			return response || fetch(e.request);
 })
);
);
});

Como ves, hemos agregado nueva funcionalidad a nuestro Service Worker y por ende a nuestra App, sin que tengamos exceso de código en él. como estamos en el contexto del Service Worker podemos utilizar self para agregar un escucha a los eventos del ciclo de vida del Service Worker, tal como se explicó en el artículo de los Service Workers. El evento fetch se dispara cuando la App a la que está escuchando el Service Worker pretende realizar una petición de algo en la red. Entonces, utilizando el método respondWith(), podemos manejar la respuesta de una petición por nosotros mismos.

Aunque entraremos más en detalle sobre el Cache Storage en un proximo articulo, en este pequeño codigo estamos utilizando su método match() para ver si tenemos el elemento solicitado en nuestro Cache Storage. En ese caso, que lo devuelva desde el Cache. En caso contrario, que lo devuelva desde la Red.

Otro lugar donde aprender un poco más del gran poder de esta API es la MDN: Fetch API.

Espero que sea de utilidad. Nos vemos en nuestro próximo post sobre el apasionante mundo de las Progressive Web Apps!