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


Related #js

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

jsで配列からランダムにn件取得する

lodashのsampleSizeを使った

jsで連番の配列を作成する

Array.from(Array(n).keys())

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意