How can I turn off the workbox browser console messages?

Question

Very simply, I would like to disable the display of the repeated workbox messages that appear in my browser console while I am debugging. For instance, I don't need to see:

WorkBox: Using NetworkFirst to respond to '/fonts/KFOlCnqEu92Fr1MmEU9fBBc-.woff'

It clutters my FireFox console and it is something I dislike very much. If you like it, fine, please don't try to change my mind about the benefit of such useless (to me) messages. Do you know how to turn it off? For info sake, I am using Quasar and Vue to create a SPA - not even a PWA. Thanks.

Answer 1

Simply add self.__WB_DISABLE_DEV_LOGS = true at the top of your service worker (sw.js) file.

Contrarily to what answers posted here say, the solution is not:

• to unregister your service worker to get rid of the messages. Your app may need it to run properly
• to add workbox.setConfig({debug: false}) unless knowing what it does:
  it switches between a production build and a debug build. workbox automatically selects the debug build when running on localhost.

Answer 2

For me worked: Console -> Application tab -> Service workers -> sw.js unregister

Answer 3

You can use workbox.setConfig({ debug: false }); in order to use production build and remove extra logging, otherwise adjust your web console log level filtering accordingly.

Doc : https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug

You add this setting in your service worker definition file, after the import. For example:

importScripts(`https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js`);
if (workbox) {
    console.log(`Yay! Workbox is loaded 😁`);
} else {
    console.log(`Boo! Workbox didn't load 😬`);
}
// Switch debug logging on/off here. Default is on in dev and off in prod.
workbox.setConfig({debug: false});

For more information on this see https://developers.google.com/web/tools/workbox/guides/configure-workbox#configure_debug_builds_vs_production_builds