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

[mswjs]

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

[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)

[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]

Works perfectly. Thank you so much!

[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.