Building Progressive Web Applications/

...

/

Working with the Cache API

Working with the Cache API

Learn how to use the Cache API and get to know the functions it provides.

We'll cover the following...

The caches interface

The Cache API provides every web application with a caches interface, which gives us access to the cache storage of our application. Multiple sub-caches can be opened inside the cache storage. Let’s see how to open a cache in it using the caches interface.

The caches.open(name: string) method

The open(name) method will open the cache (with the given name) if it already exists. Otherwise, it will create one and then open it.

caches.open('my-cache')
  .then(function (cache) {
      // use the returned cache
  });

In the above example:

  1. Open a cache named my-cache.
  2. Return a promise handled by a .then() call using the caches.open() method.
  3. Get the cache object after resolving the returned promise, which we can use inside the then() block.

The Cache.add(request: string) method

The .add() method helps us add new resources to our cache ...