PWAを設定しよう！ウェブアプリにインストール機能を実装する方法

PWAとは？

Next.js 14 には、基本的なPWA機能が標準で組み込まれています。PWA とは Progressive Web App の略語で「ウェブアプリ」を「ネイティブアプリ」のように利用できる技術になります。

ここでは、Next.js に標準で組み込まれている基本的なPWAの設定方法と利用法について解説します。

PWAの機能を有効にするには、プロジェクトの所定の位置に manifest.json (設定ファイル) とアイコン用の画像ファイルを配置します。これにより、ユーザは、ウェブアプリをネイティブアプリのように各種OSにインストールすることが可能になります。

ウェブアプリをデバイスにインストール

PWAが有効化されたウェブアプリをデバイスにインストールする方法は、ブラウザによって異なります。

例えば、PC版の Chrome では、ブラウザのアドレスバーの右側に表示されるアイコンを押下して、インストールすることができます（デスクトップにアイコンが作成されます）。

Android版 の Chrome では、ブラウザ右上の3点メニューから「ホーム画面に追加」を選択してインストールすることができます。

iOS の Safari では、次のようにインストールすることができます。

以下、PWAの機能を有効化するための具体的な手順を示します。

manifest.json の作成と配置

プロジェクトフォルダの src/app の直下に manifest.json を新規作成してください。

📂 src/
└─ 📂 app/
    └─ manifest.json

ファイルには以下の内容を貼付けてください。内容（name や ***_color など）は、各自のアプリにあわせて変更してください。

{
  "name": "Next-Blog-App",
  "short_name": "BlogApp",
  "description": "",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "icons": [
    { "src": "/android-chrome-192x192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/android-chrome-512x512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

アイコン用の画像の作成と配置

各種OSに対応させるため、次の4つのアイコン用の画像を用意します。

• favicon.ico (このファイル名にすること)

• apple-icon.png (このファイル名にすること)

• android-chrome-192x192.png (manifest.json で指定した名前にすること)

• android-chrome-512x512.png ( 〃 )

これらのファイルは、https://favicon.io/ を利用して一括作成ができます。サイトにアクセスして「Favicon Generators」の「PNG→ICO」を選択して、縦横比 1:1 の画像（512x512のPNGを推奨）をドラッグアンドドロップして、「Download」のボタンを押下してください。

favicon_io.zip というファイルがダウンロードされるので、それを解凍してください。次のようなファイルが得られます。

apple-touch-icon.png を apple-icon.png にリネームしてください。そして、以下のように配置してください。favicon-16x16.png、favicon-32x32.png、site.webmanifest は使用しません。

※ public はプロジェクトの直下に作成します。初稿では間違ってました。

📂 public/
│   ├─ android-chrome-192x192.png
│   └─ android-chrome-512x512.png
📂 src/
└─ 📂 app/
    ├─ favicon.ico
    ├─ apple-icon.png
    └─ manifest.json

あとは、Vercel にデプロイすれば OK です。

なお、npm run dev で開発モードで起動しているときや、ブラウザのゲストモードでアクセスしたときは、PWA機能が有効にならないので注意してください。