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

PWA with Next.js (create-next-app) in 2020 ⚡️ - ITNEXT


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う