Search⌘ K
AI Features
Home
Courses
Building Progressive Web Applications

Working with the Cache API

Explore how to work with the Cache API in progressive web applications to open, add, and manage cached assets using service workers. Understand key methods like add, addAll, put, delete, and match to enhance offline capabilities and efficiently handle cached resources in your PWA.

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.

Javascript (babel-node)
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() ...