Next.jsアプリケーションをPWA対応させる
next-pwaを使うとシンプルにPWA化ができた。
Next.js9からはカスタムサーバを用意しなくても以下を記述すればPWA化ができるとのこと。
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public"
}
})
デフォルトのキャッシュ設定についてはREADMEに記載されている。
キャッシュ設定で問題が起きる場合はruntimeCachingオプションでキャッシュ時間を変更できる。
pwa: {
dest: "public",
runtimeCaching: []
}
manifest.json用のアイコンや追加の設定については以下の記事が参考になった。