Workbox Warming Cache Questions

Question

I have api's that I am caching in my app. I would like to cache the api while the service worker is installing. I came across warming the cache:

import {cacheNames} from 'workbox-core';

self.addEventListener('install', (event) => {
  const urls = [/* ... */];
  const cacheName = cacheNames.runtime;
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)));
});

If you use strategies configured with a custom cache name you can do the same thing; just assign your custom value to cacheName.

1) I am using custom cache names. Would I use an array for multiple cache names? ie const cacheName = [ 'foo-api', 'bar'api']?

2) The url's I use are regexp /foo/. Will those rexexp urls work here?

3) Will I be able to cache the api while the service worker is installing before the browser consumes the api?

Answer 1

You can add as many items to as many caches as you'd like inside of your install handler.

Workbox can use RegExps for routing incoming fetch requests to an appropriate response handler, and I assume that's what you're referring to here. The answer is no, you can't just provide a RegExp if you want to cache URLs in advance—you need to provide a complete list of URLs.

Any caching that you perform inside of an install handler is guaranteed to happen before the service worker activates, and therefore before your fetch handlers start intercepting requests. So yes, this is a way of ensuring that your caches are pre-populated.

A modification of your code could look like:

self.addEventListener('install', (event) => {
  const cacheURLs = async () => {
    const cache1 = await caches.open('my-first-cache');
    await cache1.addAll([
      '/url1',
      '/url2',
    ]);

    const cache2 = await caches.open('my-second-cache');
    await cache2.addAll([
      '/url3',
      '/url4',
    ]);
  };

  event.waitUntil(cacheURLs());
});