概要
Next.js13でNextPWAを使用しPWA環境の導入を順を追って紹介していきます。
今回は初期環境構築とインストールができるところまでです。
（今後プッシュ通知機能の実装も別記事で書くかも？）
PWA(Progressive Web App)とは
PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。
簡単に説明するとWebアプリでありながらネイティブアプリの利点を取り入れてネイティブアプリっぽいアプリの開発を実現する技術のことです。
Webアプリと同様にHTML、CSS、Javascriptで構成されているためWebエンジニアにはなじみのある技術での開発が可能です。
この技術を使用している有名なアプリケーションにX（旧Twitter）やYoutubeなどがあります。（QiitaもPWAに対応してます！
ブラウザからだとこんな感じでアプリがインストールできます。
その他にネイティブアプリの利点として下記のような技術を実現しています。
- スマホやデスクトップにインストール可能
- ブラウザやハードの環境の違いに左右されない
- オフラインでも閲覧可能
- プッシュ通知の送信/受け取り
- ブラウザを経由しないシームレスなアクセス
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ファイルの作成
手動で作成してもいいのですが、既存に便利な生成ツールがあるので今回はそれをお借りします。
上記のサイトでアプリのマニフェスト設定を行うことができます。
| 項目 | 概要 |
|---|---|
| Name | アプリ名 |
| ShortName | nameが表示しきれない端末で表示するための短いアプリ名 （基本上と一緒でいい） |
| Display | 表示モードの設定。指定したモードに対応していない場合 代替のモードが自動的に設定される
|
| Description | ブラウザ検索時などに表示されるアプリの概要 |
| Scope | アプリを構成するページの範囲を指定する 通常 /<プロジェクト名>/とするのが良いらしい |
| StartUrl | アプリ起動時に最初に表示されるページのURL |
| Theme | アプリのテーマカラーの指定 |
| Background | アプリ起動時のスプラッシュ画面の背景色 |
| Icons | アプリに設定するアイコン（アップロードした画像から自動的にリサイズしてくれる） |
上記のサイトで生成されたもので最低限構築はできます。
他にもいろいろ設定できますが詳しくは下記のサイトで説明されているので参考までに。
下の画像のようにアイコン画像4つとmanifestファイルがダウンロードできれば大丈夫です。
4. プロジェクトにmanifestファイルを導入
導入する前に生成されたmanifest.webmanifestをmanifest.jsonに書き換える必要がある。
ファイルの中身すべてをpublicディレクトリに移す。
次にsrc>app>layout.tsxの中身を下記のように編集しmanifest.jsonをインポートする
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モジュールの設定を追記する
/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
dest: 'public',
register: true,
skipWaiting: true,
})
module.exports = withPWA({
//next.js config
reactStrictMode: true,
})
6. 起動して確認してみよう
npm run dev
いつものようにサーバーを起動するとURLの欄にアプリインストールボタンが追加されているはずです
インストールが完了するとデスクトップにショートカットが作成されデスクトップアプリとして実行されます
これでPWAの導入が完了しました。
7. gitignoreの設定
アプリを実行したときに気づいた人もいるかもしれませんが、PWAが実行されると下記の4つのファイルが生成されます。
- sw.js
- sw.js.map
- workbox-***.js
- workbox-***.js.map
これらはPWA実行時に毎度更新されてしまうのでプッシュする前にあらかじめ.gitignoreで取り除いておきましょう。
下記のように追記してあげればignored filesに追加されるはずです
# 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に下記のように追記してあげると解消することができます。
/** @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.js13でPWAを導入する方法を解説しました。
意外と参考文献が少なかったのと、自分としても今後の個人開発で作品のPWA対応を進めていきたいと考えていたのでメモ代わりにまとめれてよかったです。
導入自体もとっても簡単なのでWEBアプリのレスポンシブ対応させる意義が増し、今後の開発やWEBデザインのモチベーションにもつながるんじゃないでしょうか？