Msw: Hard Reload (⌘+⇧+R) makes the service worker fail to handle fetches

[kentcdodds]

If I hit ⌘+⇧+R on a page where the service worker is working, then after the reload I'll see that the service worker is activated, but it doesn't handle fetch requests.

I made a video to demonstrate the issue: https://twitter.com/kentcdodds/status/1248642870413680641

Maybe this is related to this: https://github.com/w3c/ServiceWorker/issues/952

[kentcdodds]

Found more relevant info: https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#shift-reload

Looks like this is spec. Need to find a workaround. This behavior will be really confusing for users of the app. Yes, I know msw isn't intended for production use, my use case is education so I realize that this may be an edge case msw doesn't want to handle. Though I'm pretty sure this will be confusing for developers using msw during development as well, so it's probably something worth handling.

[kentcdodds]

Alright. I found a workaround:

async function startServer() {
  if (!navigator.serviceWorker.controller) {
    const registrations = await navigator.serviceWorker.getRegistrations()
    await Promise.all(registrations.map(r => r.unregister()))
  }
  await composeMocks(...handlers).start('/mockServiceWorker.js')
}

The key here is that if navigator.serviceWorker.controller returns null that means that either:

1. The service worker hasn't been installed yet
2. The installed service worker will not be used for requests until the next reload

So the solution is to get all existing service workers and unregister them before registering the new one.

I think this would be worthwhile including by default or making opt-in.

(this helped: https://stackoverflow.com/questions/35628243/how-to-prevent-hard-reloads-from-bypassing-the-service-worker)

[kettanaito]

Thanks for reporting this, @kentcdodds. Sounds like a rather strange behavior, when you expect the service worker to be responding with mocks.

Would it be sufficient if we gathered all the registrations and unregister them within the start() method of MSW? Before calling the navigator.serviceWorker.register() method?

https://github.com/open-draft/msw/blob/75d2562065d0315911cbca718477d7ef4df684e8/src/composeMocks.ts#L36-L40

[kentcdodds]

I wonder what would happen for apps that use another service worker 🤔

[kettanaito]

I believe this issue should be solved with #99. I've added an integration test that asserts hard reload behavior, as much as it can be asserted:

https://github.com/open-draft/msw/blob/837421b3e1875eac5c2367c724103a37fea9c799/test/msw-api/hard-reload.test.ts#L29-L51

I've also verified it locally with the proposed changes, and the worker continues to handle requests after hard reload. Please expect this to be fixed once that pull request lands. Thank you for patience.

Internally, I didn't go with collecting all registrations and unregistering them. I believe this action would also unregister _other Service Workers_ associated with the client. Instead, I ensure that mockServiceWorker.js unregisters itself on window unload.

[kentcdodds]

That's wonderful news! Thank you so much for this 💯

[kettanaito]

Released in 0.13.0.
This release comes with a change to mockServiceWorker.js, so please make sure to:

$ npm install msw@latest
$ npx msw init <PUBLIC_DIR>

Hard reloading a page should no longer result into Service Worker being unable to handle requests. Could you please update and let me know how it behaves?

You may also need to unregister the currently running Service Worker manually for updates to propagate properly. Please do so if you notice unexpected behavior after updating. Thanks.

[kentcdodds]

Works perfectly. Thank you so much!