Register Service Worker from a nested path

[prathamnemade]

I need help regarding the implementation/integration, when we have the service worker present in a different dir.

Currently, my service worker is in directory - path1/path2/static/mockServiceWorker.js
But, my apis are on path - path1/path2/api/someapi
As we can see the mockServiceWorker.js is present in the static directory whereas the apis are on a different dir, how do i setup msw?

The only possibility i can see now is to move the service worker to dir- path1/path2/mockServiceWorker.js; this is how i can make it work but i am forced to stick to static path. Is there an easy way i can configure the mockServiceWorker.js ?

[kettanaito]

Hi, @prathamnemade. That's a great question.

By design, a Service Worker treats its location as the root directory it controls. It will then control that root directory and any child directories, which means intercepting requests and being able to affect the outgoing traffic.

You can, however, circumvent that design in a few ways. Listing them below.

Option 1: Proxy the worker request

If you can, create a proxy route on your server at <ROOT/mockServiceWorker.js and proxy it to the actual location of the worker at <ROOT>/static/mockServiceWorker.js. This way MSW will still register the worker from the root and since it's (proxy) location is at the root, it will control all the pages.

You can translate this solution to any nested directory, like creating a proxy at /path1/path2 instead of the root. But this solution is only applicable if you control the server.

Option 2: User the Service-Worker-Allowed response header

If you can't create a proxy request described in the first option, you can send the Service-Worker-Allowed response header to override the worker's scope.

You have to set the Service-Worker-Allowed header on the response for the mockServiceWorker.js file request so when the browser fetches the worker script, it has that header set:

GET /path1/path2/static/mockServiceWorker.js

200 OK 
# This will tell the browser that the fetched worker script
# can control every page from the root even if it's served
# from a nested directory
Service-Worker-Allowed: /

[prathamnemade]

@kettanaito , thanks for your prompt response. Also, i really appreciate all your efforts in answering all these queries.

Unfortunately, i cannot use any of the options because both of them requires a server to host the mockServiceWorker.js file.

Option 1: As you mentioned hosted on a server and then proxy the calls.
Option 2: To modify the response headers, i'll require a server.

Its my bad that my requirement is not use/serve a new host/server.

[kettanaito]

Most modern frameworks run your app using a local HTTP server. You can control that since MSW is a developer tool, you mustn't use MSW in production. Explore the documentation of your framework and see how you can implement either of the options suggested above.