Nextjs remove workbox console.log messages

Question

Any idea how to disable these console.log messages from workbox in a NextJS project?. I just started a new repo and it is just giving me too much information I don't need now

Answer 1

From the next-pwa docs, tips section:

All you need to do is create worker directory in the root of your project and put index.js file in it:

// To disable all workbox logging during development, you can set self.__WB_DISABLE_DEV_LOGS to true
// https://developers.google.com/web/tools/workbox/guides/configure-workbox#disable_logging

// eslint-disable-next-line no-underscore-dangle,no-restricted-globals
self.__WB_DISABLE_DEV_LOGS = true;

Then restart the server - and there must be no logs in console.

---

I also find useful another option - completely disable sw during the development. You can do it with disable option in next.config.js, here is mine for example:

const path = require('path');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    scope: '/',
    runtimeCaching,
    disable: process.env.NODE_ENV === 'development',
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'assets/jss/vendor')],
  },
});

After server restart, sw will no longer receive updates, but you need to manually remove the old one:

Answer 2

In Chrome's Console, select only the top context

And then, select this option to filter logs only by the active context

Answer 3

Looks like I registered a ServiceWorker pointing to my http://localhost:3000 while working on a PWA project back in the days. I fixed this by removing (unregistering) the Service Worker from my Chrome Dev Tools chrome://serviceworker-internals/?devtools

First, I unregister my localhost

Second, I unregistered it from my chrome dev tools as well (I did it already that's why is not showing)

That was it, this question helped me How do I uninstall a Service Worker?

Answer 4

Setting the pwa mode to production disables console logging. try this:

next.config.js

// inside of next.config.js
module.exports = withPWA({
    pwa: {
      dest: 'public',
      mode: 'production'
    },
 });

This worked for me. Found this at : https://www.npmjs.com/package/next-pwa#user-content-tips

Force next-pwa to generate worker box production build by specify the option mode: 'production' in your pwa section of next.config.js. Though next-pwa automatically generate the worker box development build during development (by running next) and worker box production build during production (by running next build and next start). You may still want to force it to production build even during development of your web app for following reason: Reduce logging noise due to production build doesn't include logging. Improve performance a bit due to production build is optimized and minified.

Answer 5

You can disable logs by adding this:

const withPWA = require('next-pwa')({
  // ...
  disableDevLogs: true,
  // ...
})

Answer 6

Those messages only show up in development. You can disable them.

workbox.setConfig({ debug: false });

Or inside your service worker (make sure to do it before you use workbox)

self.__WB_DISABLE_DEV_LOGS = true