VueJS PWA's - 通过 GenerateSW 启用 Workbox “调试”答案

【问题标题】：VueJS PWA's - Enabling Workbox "debug" via GenerateSWVueJS PWA's - 通过 GenerateSW 启用 Workbox “调试”
【发布时间】：2020-06-16 03:12:38
【问题描述】：

使用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（构建后）就可以满足我的需要......但这很乏味而且一定是不必要的？

【问题讨论】：

标签： vue.js progressive-web-apps workbox workbox-webpack-plugin vue-pwa

【解决方案1】：

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

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

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

【讨论】：