MockServiceWorker When Not Hosted on Root of Domain

[jrock2004]

So what I want to do is use MSW in my storybook and it works just fine when running locally. The issue I have is when we deploy this out the url it gets deployed to is, https://mydomain.com/storybooks/myapplication/index.html. When I go to the URL I get the following in the browser:

[MSW] Failed to register the Service Worker:

Script https://mydomain.com/storybooks/myapplication/mockServiceWorker.js load failed

I even tried when initiating the worker to update it to something like

  worker.start({
    serviceWorker: {
      url: `/storybooks/mockServiceWorker.js`,
    },
  });

If I go to https://mydomain.com/storybooks/myapplication/mockServiceWorker.js it loads it just fine. I do see in the console

- (Recommended) Register the worker at the root level ("/") of your application.
- Set the "Service-Worker-Allowed" response header to allow out-of-scope workers.

But that seems to be a server configuration. Is there a way in my code to set this to work? I am guessing this is more a service worker thing than an MSW thing

[kettanaito]

Hi, @jrock2004. Yes, this is certainly a worker configuration.

The requirement is to serve the worker script at the same level or higher than the application it should control. If you do serve the script under https://mydomain.com/storybooks/myapplication/mockServiceWorker.js, then it should register correctly when you open https://mydomain.com/storybooks/myapplication/index.html in the browser.

The message you see in the console implies that you are viewing a page outside of the worker's scope. This may happen if you serve the Storybook at some nested path but you view Storybook at the root. If that's the case, please follow one of those suggestions from the message, they are useful.

Alternatively, you can use the findWorker() option when starting your worker to help MSW understand where you are serving the worker script. Please note that you should only use this option if your Storybook cannot find the script (your first error and the console message you shared later contradict each other). You can find examples of using the findWorker() option in the docs.

One common issue is that people forget to deploy the worker script. That's fixed by including the public directory where you serve the worker as the -s flag option of Storybook's build. But since you confirm that the worker script is available at the correct path, this suggestion becomes irrelevant.