How to manage race condition in a service worker

Question

I'm passing data using postMessage() from my main app.tsx to my service worker.

Here's the relevant code in app.tsx which sends the buildId to the service worker upon registration:

  React.useEffect(() => {
    const buildId = 123;

    if (buildId && 'serviceWorker' in navigator) {
      navigator.serviceWorker
        .register(`/sw.js`)
        .then((registration) => {
          if (registration.active) {
            registration.active.postMessage({
              type: 'BUILD_ID',
              value: buildId,
            });
          }
        })
    }
  }, []);

And here's how I'm receiving it in service-worker.js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

let CACHE_NAME = 'cache-456';

self.addEventListener('install', (event) => {
  self.skipWaiting();
});

// Accepting value of buildId via the postMessage and appending to cache name
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'BUILD_ID') {
    CACHE_NAME = 'cache-' + event.data.value;
  }
});

workbox.routing.registerRoute(
  new RegExp('/'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: CACHE_NAME, ***// This equals cache-456, but I want it to equal cache-123***
  })
);

I successfully receive the data within the message event listener, but don't know how to pass that data to the CACHE_NAME variable inside registerRoute().

What I've tried:

• Putting workbox.routing.registerRoute(... inside of the message event listener, so that it gets CACHE_NAME after it's been redefined. I get an error saying that workbox.routing.registerRoute must be run at the global level (aka it can't be nested).
• Using a promise so that registerRoute doesn't run until the 'message' event listener resolves, but that didn't work either for the same reason.
• Storing the buildId as a query param in the filename (e.g. service-worker.js?v=123) and grabbing the value from there instead of using postMessage(), but I was getting an error when trying to register a sw with a query param.

Pretty sure the issue is that the message event listener runs after registerRoute, but I don't know how to better control the order in which things run in a service worker.

Any ideas? Much appreciated!