CODEWITHSUNDEEP
javascriptreact-routernext.jsworkbox
CarlosZ
CarlosZ

Reputation: 1124

Nextjs remove workbox console.log messages

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 nowenter image description here

Upvotes: 22

Views: 13343

Answers (6)

Farzin
Farzin

Reputation: 495

You can disable logs by adding this:

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

Upvotes: 2

leocabrallce
leocabrallce

Reputation: 322

In Chrome's Console, select only the top context

select by context

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

filter by context

Upvotes: 13

Vlad Povalii
Vlad Povalii

Reputation: 1640

From the next-pwa docs, tips section:

enter image description here

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: enter image description here

Upvotes: 30

Drew Before
Drew Before

Reputation: 41

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.

Upvotes: 4

CarlosZ
CarlosZ

Reputation: 1124

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 enter image description here

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

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

Upvotes: 6

Ivan V.
Ivan V.

Reputation: 8091

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

Upvotes: -1

Related Questions