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用のアイコンや追加の設定については以下の記事が参考になった。