Disable service workers when in development mode.

Question

In case of our development, we serve files from https://localhost as the app is hosted in salesforce.com. In chrome service worker on chrome blocks anything coming from self-signed server i.e (https://localhost).

So is there a way to disable/unregister service workers when in development mode. Any pattern to follow for this.

Thanks

Answer 1

You can use the chrome devtools, and under Application>Service Workers path select the Update on refresh checkbox

You can also use the Bypass for network checkbox to avoid Service worker's register event form firing.

Answer 2

Here is a brute-force approach:

const fn = () => {};

navigator.serviceWorker.register = () => new Promise(fn, fn);

(tested in Chrome Canary and Firefox Developer Edition)

Answer 3

1. Navigate: Dev Tools > Application > Service Workers
2. Enable: Bypass for network

This will prevent the browser from referencing the service worker for content. Very useful for development when you do not want to do cache busting on every save.

Answer 4

This solution is specific to a NextJS project using Next-PWA library to implement PWA, but it uses Google's Workbox under the hood to run service-workers, so it might help someone dig deeper.

// next.config.js

const withPWA = require('next-pwa')
 
module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === 'development',
    // ...
  }
})

References:

https://github.com/GoogleChrome/workbox/issues/1790#issuecomment-729698643 https://www.npmjs.com/package/next-pwa?activeTab=readme#configuration