vue.js - VueJS PWA's - 通过 GenerateSW 启用 Workbox “调试”

Question

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

许多问题可以通过在以下位置启用 Workbox 调试模式来解决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 的 PWA 插件更新为使用 Workbox v5 时，应该可以通过mode: 'development'在GenerateSW 配置中进行设置。

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

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