How can i enable service worker in dev mode in create-react-app?

Question

I know that we can test our service worker in production mode, but the proccess of re-building and deploying is quite annoying. Is there some way to enable serive worker in dev mode?

Answer 1

Change this

window.addEventListener('load', () => {

      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;


      console.log("file location" + swUrl);
      if (isLocalhost) {
        // This is running on localhost. Let's check if a service worker still exists or not.
        checkValidServiceWorker(swUrl, config);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit'
          );
        });
      } else {
        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);
      }
    });

with this

window.addEventListener('load', () => {

      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      console.log("file location" + swUrl);

        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);

    });

in your serviceWorker.js file

also put replace this

if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator ) {

with this

if ( 'serviceWorker' in navigator ) {

notice its checking for prod so removing that condition will start service worker on local also