53
28

概要

Next.js13でNextPWAを使用しPWA環境の導入を順を追って紹介していきます。
(2024/9/3追記)
Next.js14に対応しました。
今回は初期環境構築とインストールができるところまでです。
(今後プッシュ通知機能の実装も別記事で書くかも?)

PWA(Progressive Web App)とは

PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。

簡単に説明するとWebアプリでありながらネイティブアプリの利点を取り入れてネイティブアプリっぽいアプリの開発を実現する技術のことです。
Webアプリと同様にHTML、CSS、Javascriptで構成されているためWebエンジニアにはなじみのある技術での開発が可能です。
この技術を使用している有名なアプリケーションにX(旧Twitter)やYoutubeなどがあります。(QiitaもPWAに対応してます!
image.png
ブラウザからだとこんな感じでアプリがインストールできます。

その他にネイティブアプリの利点として下記のような技術を実現しています。

  • スマホやデスクトップにインストール可能
  • ブラウザやハードの環境の違いに左右されない
  • オフラインでも閲覧可能
  • プッシュ通知の送信/受け取り
  • ブラウザを経由しないシームレスなアクセス

Next.js13環境でPWA構築

それではNext.js13にPWAを導入してみましょう。

1. プロジェクトの作成

いつものようにCreateNextAppして移動する。
今回はsrcディレクトリもappルータも両方使います

npx create-next-app pwa-practice --typescript

cd .\pwa-practice\

2. next-pwaのインストール

npmかyarnを使用してnext-pwaをインストールする。

# npm
npm install next-pwa

# yarn
yarn add next-pwa

3. manifestファイルの作成

手動で作成してもいいのですが、既存に便利な生成ツールがあるので今回はそれをお借りします。

上記のサイトでアプリのマニフェスト設定を行うことができます。
スクリーンショット 2024-09-03 12.00.51.png

項目 概要
Name アプリ名
ShortName nameが表示しきれない端末で表示するための短いアプリ名
(基本上と一緒でいい)
Display 表示モードの設定。指定したモードに対応していない場合
代替のモードが自動的に設定される
  • fullscreen:全画面表示(代替表示:standalone)
  • standalone:ネイティブアプリと同等の外見(代替表示:minimal-ui)
  • minimal-ui:アプリのような見た目に加え、ブラウザと近いUIを表示(代替表示:browser)
  • browser:アプリ判定ではなくなりインストールもできなくなる
Description ブラウザ検索時などに表示されるアプリの概要
Scope アプリを構成するページの範囲を指定する
通常/<プロジェクト名>/とするのが良いらしい
StartUrl アプリ起動時に最初に表示されるページのURL
Theme アプリのテーマカラーの指定
Background アプリ起動時のスプラッシュ画面の背景色
Icons アプリに設定するアイコン(アップロードした画像から自動的にリサイズしてくれる)

上記のサイトで生成されたもので最低限構築はできます。
他にもいろいろ設定できますが詳しくは下記のサイトで説明されているので参考までに。

下の画像のようにアイコン画像4つとmanifestファイルがダウンロードできれば大丈夫です。
image.png

4. プロジェクトにmanifestファイルを導入

導入する前に生成されたmanifest.webmanifestmanifest.jsonに書き換える必要がある。
ファイルの中身すべてをpublicディレクトリに移す。image.png

次にsrc>app>layout.tsxの中身を下記のように編集しmanifest.jsonをインポートする

layout.tsx
  return (
    <html lang="en">
      {/* headタグとその中にアイコンやテーマカラー、manifestを記述する */}
      <head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon.png"></link>
        <meta name="theme-color" content="#b8e986" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )

5. next.config.jsを設定する

下記のようにnext.config.jsにnext-pwaモジュールの設定を追記する

next.config.js
import nextPWA from 'next-pwa';

const withPWA = nextPWA({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

const nextConfig = withPWA({
  reactStrictMode: true,
});

export default nextConfig;

6. 起動して確認してみよう

npm run dev

いつものようにサーバーを起動するとURLの欄にアプリインストールボタンが追加されているはずですimage.png
インストールが完了するとデスクトップにショートカットが作成されデスクトップアプリとして実行されます
image.png
これでPWAの導入が完了しました。

7. gitignoreの設定

アプリを実行したときに気づいた人もいるかもしれませんが、PWAが実行されると下記の4つのファイルが生成されます。

  • sw.js
  • sw.js.map
  • workbox-***.js
  • workbox-***.js.map

これらはPWA実行時に毎度更新されてしまうのでプッシュする前にあらかじめ.gitignoreで取り除いておきましょう。
下記のように追記してあげればignored filesに追加されるはずです

.gitignore
# next-pwa
**/public/sw.js
**/public/sw.js.map
**/public/workbox-*.js
**/public/workbox-*.js.map

8. developmentでPWAを無効にする

next.jsの開発環境では開発中にPWAを実行すると下記のようなwarningがログに流れるはずです。

⚠ GenerateSW has been called multiple times,
perhaps due to running webpack in --watch mode.
The precache manifest generated after the first call may be inaccurate!
Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

これは開発中にのみ発生するエラーになるのでnext.config.jsに下記のように追記してあげると解消することができます。

next.config.js
/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  // ↓ここ
  disable: process.env.NODE_ENV === "development",
})

module.exports = withPWA({
  //next.js config
  reactStrictMode: true,
})

あとがき

今回はNext.js14でPWAを導入する方法を解説しました。
意外と参考文献が少なかったのと、自分としても今後の個人開発で作品のPWA対応を進めていきたいと考えていたのでメモ代わりにまとめれてよかったです。
導入自体もとっても簡単なのでWEBアプリのレスポンシブ対応させる意義が増し、今後の開発やWEBデザインのモチベーションにもつながるんじゃないでしょうか?

53
28
2

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
53
28