For https://twitter.com/this__puneet/status/1258212251967778816

cache-network-race.ts

import {RouteHandlerCallbackOptions} from 'workbox-core/types';
import {CacheFirst, NetworkFirst} from 'workbox-strategies';
import {registerRoute} from 'workbox-routing';

// Borrowed from https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook#cache-and-network-race
function promiseAny(promises: Array<Promise<Response>>): Promise<Response> {
  return new Promise((resolve, reject) => {
    promises = promises.map(p => Promise.resolve(p));
    promises.forEach(p => p.then(resolve));
    promises.reduce((a, b) => a.catch(() => b))
      .catch(() => reject(Error('Unable get a response from network or cache.')));
  });
};

const cacheName = 'my-cache';
const networkFirst = new NetworkFirst({cacheName});
const cacheOnly = new CacheOnly({cacheName});
const cacheNetworkRaceHandler = async (options: RouteHandlerCallbackOptions) => {
  return promiseAny([
    networkFirst.handle(options),
    cacheOnly.handle(options),
  ]);
};

registerRoute(
  // Use whatever matchCallback criteria you want.
  ({url}) => url.pathname.includes('/foo/bar'),
  cacheNetworkRaceHandler
);