Disable service worker in development mode

Question

During development, my web app project serves files on a development server at https://localhost. However, Chrome blocks its service worker from accessing the server (because it does not trust the self-signed https certificate). Is there a way to disable/unregister service workers in Chrome when in development mode?

Jingoism

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.

Pitarys

Yes, but every time I refresh page the Service worker gets registered. I dont want that to happen. thx – Jingoism

Then select the Bypass for network option shown in above image to avoid the registration – Pitarys

for me a combination of Bypass for network with clicking stop did the trick. – Divisive

Answer 2

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.

Floaty

Answer 3

Here is a brute-force approach:

const fn = () => {};

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

(tested in Chrome Canary and Firefox Developer Edition)

Syllabus

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

Particularism