VueJS PWA's - Включение «отладки» Workbox через GenerateSW

Question

При использовании GenerateSW для сборки WorkBox service-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 файл, который развернут вместе с вашим сервисным работником, а затем добавить importScripts: ['wb-debug.js'] в вашу конфигурацию.

Или просто написать сценарий в процессе сборки webpack чтобы автоматически добавить это в конец сгенерированного сервисного работника, как вы, похоже, делаете в данный момент.