実装手順

1. 必要なパッケージのインストール

npm install next-pwa

2. マニフェストファイルの作成

/app/manifest.tsを作成：

import type { MetadataRoute } from 'next';

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'PaPut',
    short_name: 'PaPut',
    description: '説明',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#F59E0B',
    icons: [
      {
        src: '/icons/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/icons/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  };
}

3. next.config.jsの更新

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 既存の設定
};

module.exports = withPWA(withBundleAnalyzer(nextConfig));

4. レイアウトファイルの更新

src/app/layout.tsxにPWA関連のメタタグを追加：

export const metadata = {
  // 既存のメタデータ
  other: {
    'mobile-web-app-capable': 'yes',
  },
};

export const viewport = {
  themeColor: '#F59E0B',
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
};

// headタグ内に追加
<meta name='mobile-web-app-capable' content='yes' />
<link rel='apple-touch-icon' href='/icons/apple-touch-icon.png' />

5. アイコンの準備

必要なアイコンをpublic/icons/ディレクトリに配置：

• icon-192x192.png
• icon-512x512.png
• apple-touch-icon.png

動作確認方法

1. Chromeの場合：

   • アドレスバーの右側にインストールアイコンが表示されるか確認
   • DevToolsの「Application」タブで「Manifest」と「Service Workers」が正しく登録されているか確認

2. iOSの場合：

   • Safariの共有ボタンから「ホーム画面に追加」オプションが表示されるか確認

3. Lighthouse：

   • ChromeのDevToolsから「Lighthouse」タブを開き、PWAの項目をチェック
   • 「インストール可能」などの項目が合格しているか確認

注意点

• 開発環境ではnext-pwaを無効にしているため、本番環境でのみPWA機能が有効になる
• ブラウザ標準のインストールプロンプトは、ユーザーが何度かサイトを訪問した後に自動的に表示される
• 将来的にカスタムのインストールプロンプトが必要になった場合は、追加実装が必要