PWAに対応するためのmanifest.jsonの書き方

PWA（Progressive Web App）は、Webアプリをモバイルアプリのように扱える技術で、ユーザー体験の向上が期待できます。オフライン対応やホーム画面への追加など、さまざまなメリットがあります。

PWA対応のメリット

• ホーム画面から起動可能で、アプリのような体験ができる
• オフラインでも一部機能が利用できる
• 読み込みの高速化、キャッシュによる快適な操作感
• ブラウザのUIを非表示にしたフルスクリーン表示

Next.jsでのPWA対応手順

• manifest.jsonを作成して public ディレクトリに配置
• アプリアイコンを用意
• metadataでmanifestとiconsを設定
• （必要に応じて）Service Workerを導入

1. manifest.jsonの作成

public/manifest.json に以下のような内容を記述します。

1{
2  "name": "My PWA App",
3  "short_name": "PWAApp",
4  "start_url": "/",
5  "display": "standalone",
6  "background_color": "#ffffff",
7  "theme_color": "#0d9488",
8  "icons": [
9    {
10      "src": "https://example.com/icons/icon-192x192.png",
11      "sizes": "192x192",
12      "type": "image/png"
13    },
14    {
15      "src": "https://example.com/icons/icon-512x512.png",
16      "sizes": "512x512",
17      "type": "image/png"
18    }
19  ]
20}

注意: icons.src は必ず絶対パスで指定してください。
例："src": "https://example.com/icons/icon-192x192.png"
相対パス（"/icons/icon-192x192.png" や "icons/icon-192x192.png"）では一部の環境で正しく機能しない場合があります。

2. アプリアイコンの用意

PWA対応には複数サイズのアイコン画像を用意する必要があります。よく使われるサイズは以下の通りです：

• /public/icons/icon-192x192.png
• /public/icons/icon-512x512.png

形式はPNGが一般的です。

3. metadataでmanifestとiconsを指定

Next.jsの app/layout.tsx などで、以下のように設定します。

1export const metadata = {
2  title: 'My PWA App',
3  description: 'Next.jsでPWA対応したアプリです。',
4  manifest: 'https://example.com/manifest.json',
5  icons: {
6    icon: [
7      { url: 'https://example.com/icons/icon-192x192.png', sizes: '192x192', type: 'image/png' },
8      { url: 'https://example.com/icons/icon-512x512.png', sizes: '512x512', type: 'image/png' }
9    ]
10  }
11};

ここでも、manifest や icons.url の値は絶対パスで指定してください。

このように metadata.icons に設定することで、Next.jsが自動的に <link rel="icon"> や <link rel="apple-touch-icon"> を生成してくれます。

4. Service Workerの導入（任意）

PWAの機能をさらに強化したい場合、Service Worker を導入することで、キャッシュ制御やオフライン機能を追加できます。Next.jsで利用する際は next-pwa などのライブラリがよく使われます。ただし、PWAとして最低限必要なのは manifest.json とアイコンの設定です。

まとめ

PWAに対応することで、Webアプリの使い勝手を大幅に向上させることができます。まずは manifest.json とアイコン画像を正しく設定し、metadata に組み込むことで、PWAの基本的な対応は完了します。特に URLはすべて絶対パスで指定 する点に注意してください。