PWAのruntimeCachingでネットワークからの取得を優先するように設定する

公開日時

先日、Next.jsアプリケーションのPWA対応を行ったが、デフォルトのruntimeCaching設定がstaleWhileRevalidateとなっており、デプロイ後に手動でページをリロードしないと更新が反映されない現象が起きていた。

そこで、[[next.config.js]]のruntimeCachingを修正し、js, html, cssについてはキャッシュではなくネットワークからの取得を優先する[[NetworkFirst]]をhandlerに設定した。

const config = {
  pwa: {
    runtimeCaching: [
      {
        urlPattern: /\.(?:js)$/i,
        handler: "NetworkFirst",
        options: {
          cacheName: "static-js-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60,
          },
        },
      },
      {
        urlPattern: /\.(?:css|less)$/i,
        handler: "NetworkFirst",
        options: {
          cacheName: "static-style-assets",
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 24 * 60 * 60,
          },
        },
      },
      {
        urlPattern: /.+(\/|.html)$/,
        handler: "NetworkFirst",
        options: {
          cacheName: `static-html-cache`,
          expiration: {
            maxEntries: 16,
            maxAgeSeconds: 60 * 60 * 24,
          },
        },
      },
    ]
  }
};

これで手動リロードをしなくても最新のデータが更新されるようになった。

参考


Related #next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

Next.jsプロジェクトのGoogle Analytics V3をV4に更新する

トラッキングIDの差し替えのみで対応が完了した

Vercelで指定のブランチのみデプロイを実行する

Ignored Build Stepを設定した