【next-pwa】Next.jsにPWAを導入する方法を紹介
2024年10月22日
Next.jsにPWAはどうやって実装するの？
この記事では、Next.jsにPWAを導入する方法について紹介します。
ステップは以下の通りです。
- PWAとは？
- 実装方法
最後までご覧いただき、参考にしていただけると幸いです。
PWAとは？
PWA（Progressive Web App）は、WebサイトやWebアプリケーションをネイティブアプリのように扱える技術のことです。PWAはブラウザを通じてアクセスされますが、オフラインでの動作やプッシュ通知、ホーム画面へのアイコン追加など、ネイティブアプリに近い機能を実装できます。
PWAを導入する大きな理由としては、ネイティブアプリのような使い勝手を実現できることや、プッシュ通知の機能が挙げられます。
実装手順
それでは実装方法を紹介していきます。
パッケージのインストール
TypeScriptを使用している場合は、--save-dev オプションをつけてインストールを行います。
npm install next-pwa --save-devmanifest.jsonの用意
PWABuilderなどのツールを利用して簡単に生成することも可能ですが、以下のコードを参考に、適宜書き換えても大丈夫です。manifest.json では、PWAに関するデータを定義します。
{
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "サイトURL",
"name": "サイト名",
"short_name": "サイト名",
"description": "サイト説明文",
"icons": [
{
"src": "アイコンのパス",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "アイコンのパス",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "アイコンのパス",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "アイコンのパス",
"sizes": "512x512",
"type": "image/png"
}
]
}theme_color や background_color はプロダクトに合わせた色に変更してください。本ブログでは白がメインなので #ffffff としていますが、黒いサイトであれば #000000 などに変更すると良いです。
この manifest.json はプロジェクトの public/ ディレクトリに配置してください。
アイコンの用意
アイコンはPWABuilderなどのツールを使用する方が簡単です。
manifest.json に定義した4つのアイコン（192x192、256x256、384x384、512x512）を用意し、png 形式で保存します。これらのアイコンは public/ ディレクトリ内に配置します。
manifest.json では、アイコンのパスを以下のように指定しましょう。例えば、アイコンを public/images/icons/ に配置した場合、次のように定義します。
{
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}manifest.jsonの読み込み
manifest.json は、<head> タグ内で読み込みます。最新版のNext.jsを使用している場合、app/layout.tsx の <head> タグ内で次のように記述します。
<link rel="manifest" href="/manifest.json" />next.config.jsの変更
最後に、next.config.js にPWAの設定を追加します。以下の記述を追加してください。
const withPWA = require('next-pwa')({
dest: 'public',
register: true,
skipWaiting: true,
});
module.exports = withPWA(nextConfig);ビルド
最後に、以下のコマンドでNext.jsプロジェクトをビルドします。
npm run buildビルドが完了すると、sw.js が生成され、サービスワーカーが登録されます。これでPWAの設定は完了です！
最後に
ここまで、Next.jsにPWAを導入する方法について紹介しました。
PWAを実装することで、プッシュ通知なども行うことができるため、開発の幅が広がります。
今後、プッシュ通知の実装方法なども紹介したいと思います。
ここまでお読みいただき、ありがとうございました。
関連記事
シェアする
キーワードで探す
ブログ運営者
あらた
- 21歳
- 千葉県在住
- 文系大学生｜26卒
- 経営学部 マーケティング学科
- Webエンジニアインターンに参加中
- インターン：Vue.js, Laravel
- 個人開発：React, Next.js, PHP
お知らせ
Android版アプリ「リアル大学生：モバイル」がリリースされました。 2024年9月30日 |
RSSの不具合を修正しました。お手数ですが、新しいURLから再登録をお願いします。 2024年9月30日 |
iOS版アプリ「リアル大学生：モバイル」がリリースされました。 2024年8月3日 |
