Understanding Cache API

person carlosrojasofolder_openUncategorizedaccess_time November 4, 2017

Save files locally is one of the most important things that Progressive Web Apps offers, let’s think about it for a moment. Users on their mobile phone often find themselves with very bad connections such as when they take a subway or when they are in a basement.

Our users only want to have a good experience with our services and that is why we will need the Cache API and the CacheStorage API to store important files locally and respond with the “App Shell” on all occasions, making our users are not waiting for our UI to load when they have an unstable connection.

The Cache Storage is a new layer of storage and should not be confused with the “browser cache” to interact with the Cache Storage we have the object Cache and is the one that we will observe below.

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

The code above shows the basic use of Cache Storage, caches is a global variable that will be present in the browser and will allow us to use this new storage layer. cache is the object that will allow us to perform important operations and can highlight.

cache.addAll(): Add an array of elements in Cache Storage.
cache.delete(): Delete an element in Cache Storage.
cache.match(): Get the first element that matched with the parameter.
cache.put(): Add a new element to Cache.

Now we are going to implement it in our Service Worker. For this we are going to create a version and some assets that we are going to store.

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))
    ))
  );
});

In the code above we have written four important things. The currentCache constant in which we will save the name of the cache version and allow us to easily update the files. the constant files in which we will save the names of the files that we want to store in the Cache Storage, also we have added two operations in the install event and in the activate event of our Service Worker. In the install event, it will add all the files to the cache, that is why the use of the cache.addAll () method and in the activate event will eliminate the cache files that are old and for that, we have the name of cache with the version into currentCache. This is usually the standard way to perform these two operations and add the feature to our App.

Remember that if you want to see more thoroughly what you can do with the cache, I invite you to read its documentation.

This is all for now and see you in a next post 🙂

Liked it? Take a second to support carlosrojaso on Patreon!