PWA: serviceWorker

Gestión de la cache

Este es un ejemplo de serviceWorker, programado a mano:

const cachenom = "nompwacache-v1";
const cachefiles = [
	"index.html",
	"manifest.json",
	"styles.1.0.css"
];
this.addEventListener('install', function(event) {
	console.log('instalando sw ...');
	event.waitUntil(
		caches.open(cachenom).then(function(cache) { return cache.addAll(cachefiles); })
	);
});

this.addEventListener('fetch', function(event) {
	event.respondWith(
		caches.open(cachenom).then(function(cache) {
			return cache.match(event.request).then(function(response) {
				return response || fetch(event.request).then(function(response) {
					cache.put(event.request, response.clone());
					return response;
				});
			});
		})
	);
});
self.addEventListener('activate', function(event) {
	console.log('activado sw!');
	event.waitUntil(caches.keys().then(function(names) {
		return Promise.all(
			names.filter(function(name) {
				return name !== cachenom;
			}).map(function(name) {
				return caches.delete(name);
			})
		);
	}).then(function() {
		return self.clients.claim();
		}));
});

El serviceWorker es el archivo que se encarga de manejar la cache del navegador para la aplicación.

Tiene 3 bloques:

El de install que es el que implementa el service worker en el navegador, recibe el nombre del serviciocache que en el ejemplo que muestro lo tenemos en una variable llamada cachenom, este nombre tiene que variar cada vez que actualizamos la aplicación, lo normal es cambiar el último número del nombre de la cache: (nompwacache-v1, nompwacache-v2, nompwacache-v3).

La aplicación al leer el sw.js del servidor (que lo hace siempre a pesar de la cache), comprueba si el nombre de la cache es diferente del que tiene almacenado en la cache, si es diferente entiende que se han hecho cambios y descarga de nuevo el listado de archivos que incluye el sw.js. De esta manera se mantiene la aplicación actualizada de manera transparente para el usuario (la versión actualizada la verá el usuario la siguiente vez que la ejecute después de haber descargado los archivos de la actualización.