Nuxt.js【@nuxtjs/pwa】開発環境(localhost)でworkboxを試す方法

Nuxt.jsのpwa用ライブラリ【@nuxtjs/pwa】にて、開発環境（localhost）でworkboxを試す方法になります。

nuxt.config.jsにオプションを追加

nuxt.config.js

pwa: {
  workbox: {
    /* workbox options */
    dev: true /* 追記 */
  }
}

nuxt.config.jsのworkboxの設定にdev: trueを追記することで、開発環境でworkboxを試すことができます。

workbox設定例

nuxt.config.js

pwa: {
    workbox: {
      /* workbox options */
      dev: true 
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: 'https://demo/.*', //url以下
          handler: 'StaleWhileRevalidate',
          strategyOptions: {
            cacheName: 'assets',
            cacheExpiration: {
              maxAgeSeconds: 72 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: 'https://demo/.*.(png|gif|jpg|jpeg|svg)', //特定の拡張子
          handler: 'StaleWhileRevalidate',
          strategyOptions: {
            cacheName: 'assets',
            cacheExpiration: {
              maxAgeSeconds: 72 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: '.*api.*', //apiのリクエスト
          handler: 'StaleWhileRevalidate',
          strategyOptions: {
            cacheName: 'api',
            cacheExpiration: {
              maxAgeSeconds: 72 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    }
  }

補足

@nuxtjs/pwaのバージョンを"@nuxtjs/pwa": "3.2.2"に上げたら設定の仕方が変わっていたので、下記にまとめました。
Nuxt.js【@nuxtjs/pwa】キャッシュの設定メモ