Use MSW inside a Service Worker

[thebergamo]

First of all, MSW is great and I love it <3

These days I stumped my toes in an issue related to my requests that were done inside my "service worker" where not intercepted by MSW and while I tried to register the MSW worker inside my custom service worker it throws me an error that window is not defined.

Is it even possible to intercept requests done inside my service worker using MSW?

[kettanaito]

Hey, @thebergamo.

Have you tried composing your workers using importScripts?

// your-worker.js
importScripts('./mockServiceWorker.js')

// the rest of your worker code that makes requests.

importScripts docs on MDN

Once you do this, register your-worker.js, and tell MSW about it via url, it should work.

worker.start({
  serviceWorer: {
    url: '/your-worker.js'
  }
})

Worker start options

Pay attention which worker imports which, as I believe that will affect how the worker events like "fetch" will be resolved. Let me know if this works.

[thebergamo]

Thank you for such fast reply @kettanaito :)

Maybe I'm missing something, but I'm using this vite-plugin-pwa to generate my Service Worker, so it generates this on the fly while in development mode.

I manage to make it partially work using the following code:

const {
    offlineReady: [offlineReady, setOfflineReady],
    needRefresh: [needRefresh, setNeedRefresh],
    updateServiceWorker,
  } = useRegisterSW({
    async onRegistered(r: ServiceWorkerRegistration) {
      if (process.env.NODE_ENV === "development" && r.active?.scriptURL) {
        console.log(r.active?.scriptURL);
        worker.printHandlers();
        return worker.start({
          serviceWorker: {
            url: r.active?.scriptURL,
          },
        });
      }

      if ("PushManager" in window && r.active) {
        console.log("Push is supported");
        console.log("Service Worker is registered", r);
        const subscription = await r.pushManager.getSubscription();
        if (subscription) {
          console.info("Subscription is here");
          await saveClientSubscription(subscription);
        } else {
          console.warn("No subscription");
          await subscribeUser(r);
        }
      }

    },
  });

So in this case I only register the MSW once the Service Worker is registered in that case it works partially, but as the code to trigger this other function happens at same time or earlier it doesn't intercept.

If I register it in my main.ts I can't pick the URL for the Service worker path as it only register later.

Maybe some ideas?

(I will try to setup a repro repo in the evening)

[mupinnn]

Hi @thebergamo, did you find the solution? I've got the same issue with vite-plugin-pwa and msw