LoginSignup
0

More than 1 year has passed since last update.

next.js でPWAアプリ作ってみた 入門

Posted at

#next.jsでPWAアプリ作ってみた

作ってみたというかPWA化のための手順です。

webアプリを作成する

npx create-next-app {アプリ名}

PWA用モジュールをインストール

npm install next-pwa

PWA用のmanifest.jsonファイルを作成する

手動で作成できますが、Simicartというサービスを使ってジェネレートします。

設定サンプル

  • GENERATE MANIFESTボタンを押すとzipファイルがダウンロードされます。
  • ダウンロードしたファイルを解凍したファイルをpublicにコピーします。
  • manifest.webmanifestファイルの名前をmanifest.jsonに変更します。

###pagesディレクトリに_document.tsxファイルを作成する

import Document, { Html , Head, Main,NextScript } from "next/document";
import Link from "next/link";

class MyDocument extends Document {
    render() {
        return (
            <Html>
            <Head>
              <link rel="manifest" href="/manifest.json" />
              <link rel="apple-touch-icon" href="/icon.png"></link>
              <meta name="theme-color" content="#fff" />
            </Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        )
    }
}
export default MyDocument;

next.config.jsを変更します

const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  skipWaiting: true,
});
 
const nextConfig = withPWA({
  reactStrictMode: true,
});
 
module.exports = nextConfig;

アプリを起動します。

npm run dev

アドレスバーの右の方にアプリインストール用アイコンがあるのでクリックします。

ダイアログを表示されるのでインストールを押すとインストールされます。

以上になります。
ありがとうござしました。

参考にしたサイト

参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0