Service worker font-display polyfill

sw.js

self.addEventListener('fetch', function(event) {
  // Polyfill
  if (/https:\/\/fonts.googleapis.com\/css/.test(event.request.url)) {
    return event.respondWith(fontDisplayPolyfill(event.request));
  }

  return event;
});

async function fontDisplayPolyfill(request) {
  const cache = await caches.open('font-v1');
  const inCache = await cache.match(request);

  if (inCache) {
    return inCache;
  }

  const response = await fetch(request.url);
  let css = await response.text();

  if (css.search('font-display') === -1) {
    css = css.replace(/}/g, 'font-display: swap; }');
  }

  const newResponse = new Response(css, {
    headers: response.headers,
  });

  cache.put(request, newResponse.clone());

  return newResponse;
}