How to integrate msw with Dynamics 365

[IrynaJuriivna]

Hello Everyone, I hope you are doing well.

I`m trying to intercept requests in Dynamics365 using the MSWJS library.
I uploaded it as WebResources 3 separate files:

• mockServiceWorker.js
• my file (packed with webpack), which registers mockServiceWorker and my handlers. And also register the simple react app for the next HTML web resource.
• HTML file.

I added HTML WebResource to the form. It references the file that registers the ServiceWorker like this:

<script src="../scripts/TestMockServiceWorker.js"></script>

On the form load, I have in the Console the following message:

    [MSW] Mocking enabled.
    Documentation: https://mswjs.io/docs
    Found an issue? https://github.com/mswjs/msw/issues
    Worker script URL: 
    https://org___crm.dynamics.com/%7b638496017200000228%7d/webresources/publisher_mockServiceWorker.js
    Worker scope: https://org6eb79fb6.crm.dynamics.com/%7b638496017200000228%7d/webresources/

So when I call the request from the react button from this HTML webResource component, ServiceWorker works as expected.
But when I try to make the same request from another JavaScript WebResource - it doesn`t.

Could you tell me please if anyone ever tried to integrate Dynamics 365 with Service Worker and suggest how to do this? Is it possible to integrate MSW with Dynamics 365?

Thank you in advance

[kettanaito]

Hi, @IrynaJuriivna.

I don't have any experience with Dynamics 365 but one thing I can suggest you check is the scope of your worker.

For example, based on the info you've posted, MSW can only intercept requests from the pages under the https://org6eb79fb6.crm.dynamics.com/%7b638496017200000228%7d/webresources/ path. This means these pages:

• https://org6eb79fb6.crm.dynamics.com/%7b638496017200000228%7d/webresources/
• https://org6eb79fb6.crm.dynamics.com/%7b638496017200000228%7d/webresources/foo
• https://org6eb79fb6.crm.dynamics.com/%7b638496017200000228%7d/webresources/foo/bar/...

While the worker will be registered for the entire app, its scope equals to the path at which the worker was served. That's the Service Worker API behavior not specific to MSW.

If you want MSW to intercept requests from all pages in your app, you have two options:

1. Serve the worker script from the root (https://org6eb79fb6.crm.dynamics.com).
2. Set the custom serviceWorker.options.scope option in worker.start():

await worker.start({
  serviceWorker: {
    options: {
      scope: '/' // force the scope to be root
    }
  }
})

worker.start() docs