Seguimos en este artículo ofreciendo novedades interesantes ofrecidas por las aplicaciones web de última generación, en el Manual de Progressive Web Apps. Ahora le toca el turno a el API de caché.

Guardar archivos de manera local es una de las cosas más importantes que nos ofrecen las Progressive Web Apps. Explotada esta característica nos puede aportar numerosas variantes de optimización de las aplicaciones, y un marco de actuación que hasta ahora no había sido posible para la web, como por ejemplo el trabajo offline.

Pensémoslo por un momento. Los usuarios en su teléfono móvil se encuentran en varias ocasiones con conexiones muy malas, o directamente sin conexión, como por ejemplo cuando toman un metro o cuando se encuentran en un sótano. Sin embargo, nosotros queremos que la experiencia de uso siga siendo buena, o al menos sea posible interaccionar con nuestra UI.

Para ello vamos a usar el Cache API y el CacheStorage API, que nos permite almacenar los archivos importantes de manera local y responder con el “App Shell” en todas las ocasiones, logrando que nuestros usuarios no estén esperando a que se cargue web cuando tengan una conexión inestable.

El Cache Storage es una nueva capa de almacenamiento y no se debe confundir con el “browser cache”. Para interactuar con el Cache Storage tenemos el objeto Cache y es el que vamos a observar a continuación.

caches.open(cacheName).then(function(cache) {
  // Usa el cache aqui
});

Este codigo muestra el uso básico del Cache Storage. "caches" es una variable global que estará presente en el browser y nos va a permitir utilizar esta nueva capa de almacenamiento. Por su parte, "cache" recibido como parámetro en la respuesta positiva de la promesa, es el objeto que nos va a permitir realizar las operaciones importantes y pueden resaltar.

• cache.addAll(): Agrega un arreglo de elementos al Cache Storage.
• cache.delete(): Elimina un elemento del Cache Storage.
• cache.match(): Obtiene el primer elemento que se ajuste con el parámetro enviado. Si no encuentra nada envía un undefined.
• cache.put(): Permite agregar un nuevo elemento al cache.

Ahora vamos a implementarlo en nuestro Service Worker. Para esto vamos a crear un versionamiento y unos assets que vamos a almacenar.

const currentCache = 'cache-v1.0';

const files =
[
    '/index.html',
    '/style.css',
    '/app.js',

];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(currentCache).then(cache => {
      return cache.addAll(files);
    })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => Promise.all(
      cacheNames.filter(cacheName => {
        return cacheName !== currentCache
      }).map(cacheName => caches.delete(cacheName))
    ))
  );
});

En este codigo hemos escrito varias cosas importantes. Te enumeramos cuatro puntos que consideramos fundamentales para comenzar a entender el cache API.

1.- La constante "currentCache", en el cual guardaremos el nombre de la versión de cache y nos permitirá actualizar fácilmente los archivos.

2.- La constante "files", en la cual guardaremos los nombres de los archivos que queremos almacenar en el Cache Storage,

Puedes apreciar también que hemos agregado dos operaciones, asociadas al evento "install" y al evento "activate" de nuestro Service Worker.

3.- En el evento "install" se agregarán todos los archivos a la cache, por eso el uso del metodo cache.addAll().

4.- En el evento "activate" se va a eliminar los archivos de cache que sean antiguos. Para eso tenemos el nombre de cache con la versión. Esta suele ser la forma estándar de realizar estas dos operaciones y agregar la característica a nuestra App.

Recuerda que si quieres ver mas a fondo lo que puedes hacer con el cache, te invito a leer su la documentación de Cache API en el sitio de MDN.

Conclusión a la introducción del caché API

Esperamos que con estas guías puedas comenzar a hacer algún experimento por tu cuenta en tus service workers, para comenzar a jugar con el API de caché. Esto es todo por ahora. Nos vemos en un próximo post.