VueJS PWA's - Enabling Workbox "debug" via GenerateSW

Question

When using GenerateSW to build your WorkBox service-worker.js there are a number of configurations for which consistent documentation is hard to find.

Many problems can be overcome with the Workbox debug mode enabled in the service-worker.js:

workbox.setConfig({
  debug: true
});

How does one get npm run build to add this line to the service-worker.js automatically?

My current config is:

module.exports = {
  publicPath: '',
  pwa: {
    // General config bits.. 
    name: '...',

    // Configuration of the workbox plugin
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {

      // ** Would like to flag DEBUG here!? **
      // debug: true,

      // ...Further example Workbox options...
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: new RegExp('https://fonts.(gstatic|googleapis).*'),
          handler: 'cacheFirst',
          method: 'GET',
          options: {cacheableResponse: {statuses: [0, 200]}}
        },
      ],
    }
  }
};

Note, just adding the setConfig line to the service-worker.js (post-build) does what I need.. but it's tedious and must be unnecessary?

Answer 1

If/when Vue's PWA plugin is updated to use Workbox v5, that should be possible by setting mode: 'development' in your GenerateSW config.

In the meantime, you could put that into a wb-debug.js file that's deployed alongside your service worker, and then add importScripts: ['wb-debug.js'] into your configuration.

Or just script something in the webpack build process to automatically append that to the end of the generated service worker, like you appear to be currently doing.