VueJS PWA - 通过 GenerateSW 启用 Workbox "debug"

Question

当使用 GenerateSW 构建您的 WorkBox service-worker.js 时，有许多配置很难找到一致的文档。

在 service-worker.js:

中启用 Workbox 调试模式可以解决许多问题

workbox.setConfig({
  debug: true
});

如何让 npm run build 自动将此行添加到 service-worker.js？

我当前的配置是：

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]}}
        },
      ],
    }
  }
};

注意，只需将 setConfig 行添加到 service-worker.js (post-build) 就可以满足我的需要..但它很乏味而且肯定是不必要的?

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.

与此同时，您可以将其放入与服务工作者一起部署的 wb-debug.js 文件中，然后将 importScripts: ['wb-debug.js'] 添加到您的配置中。

或者只是在 webpack 构建过程中编写一些脚本，以自动将其附加到生成的服务工作者的末尾，就像您当前正在做的那样。