Search code examples
workbox

Where do I import setConfig form in workbox v5?


In workbox v4 it was easy: workbox.setConfig({ debug: false });

Where do I import setConfig in v5 from? The docs are not there yet, unfortunately.


Solution

  • If you're using the CDN version of Workbox v5, then workbox.setConfig({debug: false}) works the same way as it previously did. (But I'm assuming you wouldn't have asked this if you were using the CDN version.)

    We expect that most folks will use Workbox v5 not via the CDN, but instead by consuming the JavaScript modules and creating their own bundled service workers. In that setup, toggling between dev and prod mode is different.

    The Workbox codebase uses the process.env.NODE_ENV variable to determine whether it's in dev or prod mode, with if statements like these that will conditionally log found throughout the code.

    If you're using webpack to create a bundled service worker that uses the Workbox JavaScript modules, then process.env.NODE_ENV will be automatically replaced with the value of your configured mode. That means that everything should "just work" and you'll get a bundle with extra logging statements when webpack is configured to be in a development mode, and a smaller bundle without logging when webpack is in production mode.

    If you're using Rollup or another bundler to consume the Workbox JavaScript modules, you'll need to add in a plugin (like @rollup/replace) that will replace process.env.NODE_ENV with a string based on whether you want to create a dev or prod bundle.

    Under the hood, if you're using the generateSW mode in Workbox v5, we use Rollup to create the final bundled service worker. You can take a look at how we handle the string replacement in the workbox-build source code.