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,
},
},
},
]
}
};これで手動リロードをしなくても最新のデータが更新されるようになった。