VueJS PWA-通过GenerateSW启用工作箱“调试”

Question

[使用GenerateSW生成WorkBox service-worker.js时，有许多配置很难找到一致的文档。

[service-worker.js中启用的工作箱调试模式可以克服许多问题：

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（构建后）即可。我需要..但这很乏味，而且不必要吗？

Answer 1

如果/当Vue's PWA plugin更新为使用Workbox v5时，应该通过在mode: 'development'中设置GenerateSW config来实现。

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

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