Entendiendo la Cache API

Comunmente esta API es usada en conjunto con la API Service worker, pero puedes usarlo independientemente aunque no he encontrado un ejemplo de su uso fuera de esta API. Segun la definicion se usa para guardar objectos "Request" y "Response", esto significa que puedes dar las peticiones que haces al server y tambien las respuestas del server.

Una parte importante a saber que casi todos los metodos de esta API usan promesas. Para crear un espacio donde cachear todos nuestros assets solo necesitamos llamar este metodo del objecto "caches"

caches.open('test-cache').then(function(cache) {
  // Cache is created and accessible
});

El nombre 'test-cache' es una namespace o identificador de la cache que hemos creado. De esta manera podemos usarla luego.

Para agregar elementos a la cache creada se usa comunmente los metodos "Add" y "addAll".

cache.add('/sw-test/index.html').then(function() {
  //request have been added to the cache
});

cache.addAll(['/', '/images/logo.png']).then(function() {
  //requests have been added to the cache
});

La diferencia es que en la segunda se pasa un arreglo de urls. Algo que destacar aqui es que usar el metodo "add" es lo mismo que usar fetch de formal normal con put de esta manera:

fetch(url).then(function (response) {
  if (!response.ok) {
    throw new TypeError('bad response status');
  }
  return cache.put(url, response);
});

O peticiones personalizadas con el object "Request" de esta forma:

cache.add(new Request('/page/1', { /* request options */ }));

"add" and "addAll" son como atajos del metodo "put" por que con este metodo pones en cache usando key/value de esta manera:

fetch(url).then(function (response) {
  return cache.put(url, response);
});

Revisar la cache

 Para revisar que hemos puesto en la cache primero necesitamos abrirla y despues explorar los elementos usando el metodo "keys"de esta manera:

caches.open('test-cache').then(function(cache) { 

  cache.keys().then(function(cachedRequests) { 
    // [] Array of all of caches keys
  });
});

Para buscar dentro se usan los metodos "match", "matchAll":

caches.open('test-cache').then(function(cache) {
  cache.match('/page/1').then(function(matchedResponse) {
    console.log(matchedResponse);
  });
});

En el ejemplo anterior, estamos buscando el objecto en cache que correspondo con la peticion a 'page/1'

Otros usos comunes serian leer y buscar:

caches.open('test-cache').then(function(cache) {
  cache.delete('/page/1');
});

caches.keys().then(function(cacheKeys) { 
  console.log(cacheKeys); // Get all the namespace created
});

caches.delete('test-cache').then(function() { 
  console.log('Cache successfully deleted!');  
});

Dentro de un service worker, el proceso seria algo asi:

• El service worker intercepta todas las peticiones al server, ya sean ajax o cargar otras paginas web.
• Una vez interceptada la peticion, revisamos en nuestra cache si esa peticion ya esta en la cache
• Si es asi devolvemos el objecto en cache.
• Si no dejamos que la peticion siga su curso, al terminar la metemos al cache.

Ejemplo de esto:

//trigger on url changes and requests to the server
serviceWorker.addEventListener('fetch', function(event) { 
 //search in the cache for the request that is in progress
 var cacheFound = caches.match(event.request).then(function(response) {
  
  if (response) {
   //return the object cached
    return response;
  } else {
   //if not, we make the normal request
   return fetch(event.request); 
  }  
 });

 //we pass the promise 
 event.respondWith(cacheFound);

});

Aqui he hecho un ejemplo del uso de la cache API sin un service worker

Links

https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://davidwalsh.name/cache

Te gusto este articulo ? Suscribete para recibir mis ultimas noticias