VueテンプレートPWAを使っているのですが画像のキャッシングがうまく行かなかったよ

ネットワーク切断状況で動くのがPWAの醍醐味ではありますが・・・

Vueのpwaテンプレートを使ってPWAアプリに仕立てたグラタン。
gratan.dokechin.com
初期メニュー画面の画像ファイルはjpgにしていまして。またマテリアルデザインフレームワークのvuetify.jsを使っているのでgoogle fontへの依存があります。
pwaテンプレートは大きなサイズの画像になるとどうもキャッシュされないようでした。
小さいと文字列にして画像を固めてくれているようで大丈夫のようでした。pngのロゴはよしなにしてくれている。
これらのファイルをキャッシュはデフォルトのpwaテンプレートでは面倒を見てくれないのです。

webpack.prod.conf

pwaテンプテーとはwebpackのプラグインであるSWPrecacheWebpackPluginを使っています。それらのキャッシュの設定を編集してあげればいいようです。
以下のようにして見ましたが、jpgファイルがキャッシュされない。
原因がわからないので試行錯誤。

    new SWPrecacheWebpackPlugin({
      cacheId: 'gratan',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css,jpg,jpeg}'],
      minify: true,
      stripPrefix: 'dist/'
    })

こんな感じにしたら、キャッシュされるようにはなりました。何故かはよくわからないのですが・・

    new SWPrecacheWebpackPlugin({
      cacheId: 'gratan',
      filename: 'service-worker.js',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/',
      runtimeCaching: [
        {
          urlPattern: /\.(jpg|png|svg|woff|ttf|eot)/,
          handler: 'cacheFirst'
        },
        {
          urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
          handler: 'cacheFirst'
        }
      ]
    })

兎に角、pwaテンプレートを使ってOKというわけではなくて、アプリによってはキャッシュの設定が必要になりますよというお話でした。