Prove client-side usage API

[mswjs]

Prove client-side usage API

[kettanaito]

Now example works because the service worker lies in its parent directory, therefore can access its scope. In real use case the service worker (library) will be in node_modules, and won't be able to access the application's scope.

[kettanaito]

I am testing SW registration in CRA, and, obviously, it cannot reference SW file properly. One of the reasons is that the SW file is not served, but lies within node_modules/msw directory.

One of the ways to overcome this may be introducing something like:

import { msw } from 'msw'

msw.start(() => {
  return navigator.serviceWorker.register('/node_modules/msw/mockServiceWorker.js')
})

So that the registration action happens on the usage side, and provides the reference to the registered SW to the msw to handle custom logic.I have no confirmation if this API would work, but I can give it a try.

[kettanaito]

Delegating the registration point to the end developer doesn't solve the Service Worker serving issue. Runtime execution tries to look up the SW based on the base directory.

[kettanaito]

ServiceWorker API supports importScripts. Maybe it's reasonable to ask from a developer to create its own service worker, and then import the MSW script from node_modules into it. This eliminates registration and scope issues, but makes getting started process slightly more complicated.

[kettanaito]

Including a short analyzis of trying out a few ways to register a third-party service worker.

Register from within the library

Impossible, since mockServiceWorker.js must be served from the application server.

Register from client, point to node_modules

// app/mocks.js
msw.start(navigator.serviceWorker.register('../node_modules/msw/mockServiceWorker.js'))

Impossible, as the registered SW must be served from the application server.

Using importScripts()

There is a catch with importScripts, as it can only import:

• local served files (can't serve from node_modules)
• external files via absolute urls (defiles the purpose of msw being an offline tool).

Importing MSW from some CDN with some basic version validation would theoretically work, but I dislike an idea to require internet connection to use an in-browser development tool. Sounds ridiculous.

[kettanaito]

🎉 After a small proof of concept, I can state that using a simple CLI command like msw create copies the Service Worker into the dir provided via CLI prompt, and can be registered properly on developer's side.