ローカルPWAアプリの作り方：ウェブサイトを「リアルなアプリ」に変える

1 PWAとPWA開発とは

このチュートリアルでは、完全なクローズドループを完成させます：普通のウェブプロジェクトから、デスクトップやスマホのホーム画面にインストールでき、オフラインでも動作する「リアルなアプリ」まで。 あなた自身がReactアプリをPWAに変え、オンラインにデプロイし、スマホにインストールしてテストします。

これから作るのはトマトファームアプリです - ポモドーロ・テクニックと農業ゲームを完璧に組み合わせたPWAです。25分の集中作業でポイントを獲得し、そのポイントで種を買って作物を育てます。レベルが上がると、より多くの農地とより良い種がアンロックされます。最も重要なのは、インターネットがなくても動作し続け、すべてのデータがローカルに保存されることです。

このチュートリアルに取り組む前に、少なくとも以下のものを用意してください：

• パソコン（WindowsまたはMac）
• Node.js環境（バージョン18.0以上）
• AIコーディングアシスタント（Cursor / Trae / Claude Codeなど）
• スマホ（モバイルインストールのテスト用）

1.1 PWAとは

PWA（Progressive Web App）は特別な種類のウェブサイトです。Service Worker技術により、「自分自身をキャッシュして引き受ける」能力を持ちます。

なぜ普通のウェブサイトはオフラインで動かないのに、PWAは動くのか

普通のウェブサイトは、開くたびにHTML、CSS、JSファイルをサーバーからダウンロードする必要があるため、ネットワークがダウンすると単に読み込めません。一方、PWAはService Worker（ブラウザのバックグラウンドで動作するJSスクリプト）を使用して、初回訪問時にこれらのファイルをローカルにキャッシュします。その後、ネットワークが切断されても、Service Workerはローカルキャッシュから直接ファイルを読み取り、ページを正常に表示できます。

簡単な例え：普通のウェブサイトは毎回図書館から本を借りるようなもの（インターネットが必要）で、PWAは本を買って自分の本棚に置くようなもの（初回ダウンロード後はオフラインでも読める）です。

PWA vs 普通のウェブサイト vs ネイティブアプリ

特徴	普通のウェブサイト	PWA	ネイティブアプリ
インストール	不要	オプション（ホーム画面に追加）	アプリストアからのダウンロードが必須
オフライン使用	❌ 不可	✅ 可能（キャッシュ後）	✅ 可能
更新方法	自動リフレッシュ	自動 / バックグラウンド更新	ユーザーの手動更新
サイズ	なし	数百KB〜数MB	数十MB以上
開発コスト	低い	低い（1つのコードベース）	高い（iOS / Android別々）

一言でまとめると：PWAは「自分自身のファイルを保存できるウェブページ」です - ウェブサイトの軽さ（インストール不要、自動更新）とネイティブアプリの体験（オフライン対応、デスクトップ/ホーム画面にインストール可能）の両方を持っています。

1.2 なぜPWAを選ぶのか

Vibe Codingの時代において、PWAは最も費用対効果の高い「クロスプラットフォームソリューション」の一つです：

比較項目	ネイティブアプリ	PWA
開発コスト	iOS / Android / デスクトップを別々に開発が必要	1つのコードベースで全プラットフォーム対応
インストール	アプリストアに行く必要がある	ブラウザで直接インストール、即座に完了
更新方法	ユーザーが手動で更新する必要がある	自動更新、ユーザーには見えない
パッケージサイズ	数十MBになることが多い	通常わずか数百KB
オフライン対応	自然に内蔵	Service Workerにより対応
最適なシーン	ハードウェアへの深いアクセスが必要（AR / Bluetoothなど）	コンテンツ表示、ツール、軽量アプリ

一言でまとめると：アプリがカメラを使ったARやBluetoothハードウェアアクセスを必要としない場合、PWAはほぼ最も簡単な選択です。

1.5 チュートリアルのロードマップ

学習プロセスが退屈にならないよう、このチュートリアルは楽しく実用的なケースを中心に進めます - トマトファームです。これはポモドーロ農業ゲームで、集中作業とゲーミフィケーション報酬を組み合わせています。AIコーディングアシスタントのVibe Codingモードと一緒に、ゼロからスマホへのインストールまでのプロセスを再利用可能なルートに分解します：

1. 理解と環境構築：PWAとは何かを理解し、Node.jsとAIコーディングアシスタントをインストールし、ツールチェーンがスムーズに動くことを確認します。
2. プロジェクトスケルトンの構築：ローカルで実行できるReact + TypeScriptプロジェクトを作成します。
3. AIによる反復開発：AIとの対話を通じて、ポモドーロカウントダウン、農業システム、レベルシステム、SVG作物レンダリングなどを構築します。
4. PWA設定とオフラインテスト：Service WorkerとManifestを追加し、オフライン対応を検証します。
5. デプロイとスマホへのインストール：VercelにデプロイしてHTTPS URLを取得し、スマホにインストールして使用します。

このセクションでは全体像を示すだけで、具体的なコマンドは展開しません。今はメインラインを覚えておいてください：環境構築 → スケルトン作成 → AIによる記述と生成 → PWA設定 → デプロイと納品。次の章で、各ステップを一緒に進みます。

2 開発環境のセットアップ

2.1 このチュートリアルで使用するツール

開発プロセス全体で3つのツールを組み合わせて使用し、それぞれが「設計」「構築」「受け入れ」の役割を果たします。

• AIコーディングアシスタント（Cursor / Trae / Claude Code）：あなたのAIコーディングパートナーです。Vibe Codingモードでは、コードを一行ずつ書く必要はありません。代わりに、自然言語でAIにどの機能が欲しいかを主に伝え、コードの生成と修正を任せます。
• Node.js + Vite：これらはプロジェクトビルド工場です。Node.jsはJavaScriptランタイムを提供し、Viteは次世代フロントエンドビルドツールで非常に高速で、特にPWAの構築に適しています。
• スマホ：実行結果を確認するためのテストデバイスです。スマホのブラウザでデプロイされたPWAに直接アクセスし、実際のインストールとオフライン機能をテストできます。

2.2 Node.jsのインストール

Node.jsはPWA開発の基本環境です。公式サイトhttps://nodejs.orgにアクセスし、LTS（Long Term Support）バージョンをダウンロードします（このチュートリアルはNode.js 18.x以上をベースにしています）。

ダウンロード後、通常のソフトウェアと同じようにインストーラーをダブルクリックし、デフォルトオプションのままインストールします。

インストール後、ターミナル（WindowsではCMD / PowerShell、MacではTerminal）を開き、以下を実行します：

node --version
npm --version

v18.17.0や9.6.7のようなバージョン出力が見えれば、インストール成功です。

2.3 AIコーディングアシスタントのインストール

AIコーディングアシスタントはVibe Codingの主戦場です。シンプルに「スーパーAIを内蔵したエディタ」と考えてください。

推奨選択肢：

• Trae：https://www.trae.cnにアクセスし、OSに合ったバージョンをダウンロード
• Cursor：https://cursor.shにアクセスしてインストール
• Claude Code：すでにClaudeを使用している場合、Claude Codeを直接使用可能

インストールプロセスは非常にシンプルで、通常のソフトウェアのインストールと同じです。このツールの準備ができたら、以降の実践では退屈なコードウィンドウを見つめるのをやめ、ここでプロジェクトを開いてチャットボックスで自然言語を使ってAIにコードを書かせ、バグを修正させます。

2.4 新規プロジェクトの作成

AIコーディングアシスタントを開き、チャットボックスに以下のプロンプトを入力します：

トマトファームアプリを構築するための、tomato-farm-pwaという名前のReactプロジェクトを作成してください。
TypeScriptをサポートし、PWA機能（スマホのホーム画面にインストールできるタイプ）も含めてください。

AIは自動的に以下のステップを実行します：

ステップ1：プロジェクトの作成

npm create vite@latest tomato-farm-pwa -- --template react-ts

ステップ2：プロジェクトに入り、依存関係をインストール

cd tomato-farm-pwa
npm install

ステップ3：PWAプラグインのインストール

npm install vite-plugin-pwa -D

AIが完了すると、プロジェクト構造は概ね以下のようになります：

tomato-farm-pwa/
├── public/              # 静的アセット（アイコン、SVG素材はここに配置）
├── src/
│   ├── App.tsx          # メインコンポーネント
│   ├── main.tsx         # エントリーファイル
│   └── App.css          # スタイル
├── index.html           # HTMLエントリー
├── vite.config.ts       # Vite設定（PWA設定はここに書く）
├── package.json
└── tsconfig.json

2.5 プロジェクト構造を理解する

プロジェクトが作成されたら、いくつかの主要ファイルの役割を理解する必要があります：

ファイル / ディレクトリ	目的
src/App.tsx	メインアプリケーションコンポーネント。コアページロジックを書く場所
src/main.tsx	アプリケーションのエントリーファイル。Reactアプリのマウントを担当
vite.config.ts	Vite設定ファイル。コアPWA設定を書く場所
public/	静的アセットディレクトリ。PWAアイコンやSVG素材の配置場所
index.html	HTMLエントリーファイル。通常は変更不要

初心者として、主に3つの部分に注目する必要があります：

• App.tsx：プログラムの動作を制御し、「画面に何が表示されるか」を決定します
• vite.config.ts：PWAの動作を設定し、「アプリがどのようにインストール・キャッシュされるか」を決定します
• public/：アプリアイコンやアセットの保存場所

2.6 アプリアイコンの準備

PWAはインストールするためにアイコンが必要です。最低でも、192x192と512x512サイズの2つのPNG画像が必要です。

AIに生成を頼むことができます：

192x192と512x512のサイズのアプリアイコンを2つ生成してください。
緑のグラデーション背景で、中央に赤いトマトを描いてください。publicフォルダーに保存してください。

または、任意のデザインツール（Figma、Canva）で自分でアイコンを作成し、public/ディレクトリに配置することもできます。

2.7 vite-plugin-pwaの設定

これは最も重要なステップです。vite.config.tsを開き、AIにPWAプラグインの設定を頼みます：

vite.config.tsをPWA設定に変更し、ウェブページをスマホのホーム画面にインストールできるようにしてください：
- アプリ名は「Tomato Farm」、緑のテーマ
- publicディレクトリのicon-192.pngとicon-512.pngをアイコンとして使用
- 自動更新を有効にする
- すべてのjs、css、html、画像ファイルをキャッシュし、オフラインで動作するようにする

AIは以下のような設定を生成します：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Tomato Farm',
        short_name: 'Tomato Farm',
        description: 'Focus, plant, and grow',
        theme_color: '#4CAF50',
        background_color: '#ffffff',
        display: 'standalone',
        icons: [
          {
            src: '/icon-192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/icon-512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}']
      }
    })
  ]
})

主要設定の説明：

• registerType: 'autoUpdate'：新しいバージョンを公開すると、次回ユーザーが開いたときにアプリが自動的に更新され、手動操作は不要です。
• display: 'standalone'：インストール後、ブラウザのアドレスバーなしで独自のウィンドウで実行され、ネイティブアプリのように感じられます。
• workbox.globPatterns：Service Workerにどのファイルタイプをキャッシュし、オフラインでもアクセス可能にするかを指示します。

3 トマトファームPWAを構築する

前の2章で、PWAとは何かを理解し、環境のセットアップを完了しました。このセクションから、理論だけの話をやめて実際の実践に入ります。Vibe Codingモードを使用して、ゼロから楽しく実用的なアプリを構築します - トマトファームです。ポモドーロ・テクニックとゲーミフィケーションインセンティブを完璧に組み合わせ、PWA開発の核心的な要素をカバーします：UIインタラクション（ポモドーロタイマー）、データ保存（ポイントと作物）、オフライン機能（Service Workerキャッシュ）。

それでは、AIに最初の指示を送りましょう。

3.1 最初の「マスタープロンプト」：ゼロからイチへ

Vibe Codingモードでは、従来のアプローチのように最初にレイアウトファイルを作成してからロジックコードを書く必要はありません。必要なのは、要件を一度に明確に記述し、AIに最初の実行可能なバージョンを生成させることです。

作成したプロジェクトディレクトリをAIコーディングアシスタントで開き、以下のプロンプトを入力します：

トマトファームアプリのメインページを書いてください。以下の機能を含めてください：

**ポモドーロタイマー**
- 25分のカウントダウンタイマー（開始、一時停止、リセット付き）
- 残り時間とプログレスバーを表示
- 1回の集中セッション完了後にユーザーに10ポイントを付与

**農業システム**
- 3区画の農地、ただし最初は最初の1区画のみ利用可能。後の区画はレベルアップ後にアンロック
- 種を買うショップ：ニンジンは5ポイント、トマトは10ポイント、トウモロコシは15ポイント
- 種を買って植えると、作物がゆっくり成長し、成熟するとポイントのために収穫可能

**レベルシステム**
- 合計ポイントでレベルアップ：0〜100ポイント = 初心者農家、100〜300 = 熟練農家、300以上 = ファームマスター
- レベルアップ後に新しい土地とより良い種をアンロック

**UIデザイン**
- 上部にレベル、ポイント、アップグレードプログレスバーを表示
- 中央にポモドーロカウントダウンを表示
- 下部に農地グリッドを表示
- 最下部にショップボタン
- 緑のテーマで、新鮮で可愛く見えるようにする
- スマホ画面に適応させること

**データ保存**
- すべてのデータ（ポイント、レベル、農地の状態）を保存し、ページをリフレッシュしても失われないようにする

送信後、AIが推論・分析を開始し、プロジェクト構造を理解するのが見えます。数秒後、App.tsxの完全なコードが直接生成されます。

1. レスポンスから推論ロジックとインタラクションロジックを確認できます
2. コードの変更箇所を直接確認できます
3. 満足できない場合、以前のバージョンにロールバックできます

3.2 実行とプレビュー（ローカル開発サーバー）

AIが最初のラウンドの開発を完了しましたが、覚えておいてください：コーディングアシスタントで見ているのはまだコードの「設計図」であり、本当にインタラクティブなアプリではありません。実際にコードを実行して実際の効果を確認するには、ローカル開発サーバーを起動する必要があります。

AIコーディングアシスタントのターミナルで以下を実行します：

npm run dev

数秒後、ターミナルに以下のような出力が表示されます：

  VITE v5.0.0  ready in 300 ms

  ->  Local:   http://localhost:5173/
  ->  Network: use --host to expose
  ->  press h + enter to show help

ブラウザでhttp://localhost:5173/を開くと、以下が見えるはずです：

• 上部にレベル、ポイント、プログレスバー
• 中央にポモドーロカウントダウン
• 下部に農地エリア
• 最下部にショップボタン

「集中開始」ボタンをクリックしてカウントダウンが正常に動作するか試してみてください。農地のマスをクリックして種を買って植えられるか試してみてください。これがあなたのPWAアプリの最初のバージョンです。

3.3 最適化の反復（SVG作物とアニメーションの追加）

この時点で、アプリは基本的な形を持っています：ポモドーロタイマー、農業システム、レベルシステムです。しかし、まだ粗く見え、作物はテキストや単純なブロックとしてのみ表示されているかもしれません。次に、美しいSVG作物と成長アニメーションを追加して、トマトファームに命を吹き込みます。

これこそがVibe Codingの最も魅力的なところです。従来の開発では、SVGグラフィックの描画や複雑な成長アニメーションの構築は初心者にとって悪夢のようなものでした。SVGパスの描画を処理するだけでなく、アニメーションカーブも計算する必要があります。Vibe Codingモードでは、これらの低レベルの詳細を心配する必要はありません。監督のようにAIに伝えるだけです：「作物に素敵なSVGグラフィックを与え、アニメーション付きで成長させて」と言えば、複雑なコードがほぼ即座に現れます。

ステップ1：SVG作物アセットの準備

AIにコード内で直接SVGを描画させるか、SVGファイルを準備してpublic/の下に配置できます。このチュートリアルでは、AIにSVGコードを直接生成させることをお勧めします。より柔軟だからです。

ステップ2：反復指示の送信

AIコーディングアシスタントに戻り、以下のプロンプトを入力します：

作物を見栄えよくして、成長アニメーションを追加してください：

**作物のグラフィック**
- ニンジン：オレンジ色の本体に緑の葉
- トマト：赤い丸形に小さな緑の葉
- トウモロコシ：黄色いとうもろこしに緑の外葉
シンプルな形状を使用してください

**成長アニメーション**
- 植えられたばかりのときは小さな芽から始まり、徐々に成熟に向かって成長する
- 3つの段階を表示

**収穫エフェクト**
- 成熟した作物をクリックしたとき、シンプルな収穫アニメーションを再生
- 獲得したポイント数を表示

**全体の改善**
- 農地のマスにはボーダーと背景色を持たせる
- 作物はマスの中央に表示
- 全体のスタイルはもう少し可愛く

AIはコードを再度修正し、SVGレンダリングとアニメーションロジックを処理します。完了後、ブラウザをリフレッシュすると、より良い作物グラフィックとスムーズな成長アニメーションが見えるはずです。

3.4 効果音と通知の追加（オプション）

トマトファームをより没入感のあるものにしたい場合は、効果音と通知も追加できます。これもシンプルなプロンプトだけで済みます：

トマトファームに効果音と通知を追加してください：

**効果音**
- 集中開始時に「チン」という音を再生
- 集中完了時にファンファーレを再生
- 植え付けと収穫にもマッチする効果音を追加

**通知**
- 集中サイクル終了後に「おめでとう、集中セッションを完了しました！」と表示
- レベルアップ時に「おめでとう、XXにレベルアップしました！」と表示
- 新しい農地がアンロックされたときに「新しい農地がアンロックされました！」と表示

シンプルな音声ファイルまたはWeb Audio APIで実装してください

AIが効果音と通知の追加を手伝い、トマトファームをより活気があり楽しいものにします。

4 PWAをローカルで体験する

4.1 ビルドとプレビュー

PWAのService Workerは本番ビルドでのみ有効になります（開発モードでは登録されません）。そのため、まずビルドしてからプレビューする必要があります：

以下のコマンドを実行してください：
1. npm run build（本番バージョンをビルド）
2. npm run preview（ローカルプレビューサーバーを起動）

ビルド後、Viteはdist/ディレクトリにすべてのファイルを生成します。これには自動生成されたsw.js（Service Worker）とmanifest.webmanifestが含まれます。

プレビューサーバーが起動したら、ターミナルに表示されるアドレス（通常はhttp://localhost:4173）を開きます。

4.2 デスクトップにPWAをインストール

プレビューURLを開くと、ブラウザのアドレスバーの右側にインストールアイコン（通常は小さなダウンロード矢印または「+」サイン）が現れるのに気付くでしょう。

Chrome / Edgeインストール手順：

1. アドレスバーの右側のインストールアイコンをクリック
2. ポップアップダイアログでインストールをクリック
3. PWAがスタンドアロンウィンドウで開き、デスクトップ / スタートメニュー / Dockにショートカットが作成されます

インストールされたPWAはネイティブデスクトップアプリと全く同じように見えます - アドレスバーなし、タブなし、独自のウィンドウとアイコン付き。今すぐトマトファームを開いて、集中と農業の旅を始められます。

macOS Safariインストール手順：

1. SafariでPWAのURLを開く
2. メニューバーからファイル -> Dockに追加をクリック
3. PWAアイコンがDockに表示されます

4.3 オフライン機能のテスト

これはPWAの最もクールな部分です。オフラインモードが本当に動作するか検証しましょう：

1. PWAがブラウザで少なくとも一度開かれていることを確認（Service Workerがリソースをキャッシュするため）
2. ネットワークを切断（Wi-Fiをオフにするかケーブルを抜く）
3. ページをリフレッシュ - トマトファームが正常に読み込まれるのがわかります！
4. ポモドーロセッションを開始 - 完了後にポイントを獲得し、種を買い、作物を植える - すべてのデータがlocalStorageに正常に保存されます

Chrome DevTools（F12）-> Application -> Service WorkersでService Workerのステータスとキャッシュされたリソースリストを確認することもできます。

4.4 データの永続化と同期オプション

トマトファームはすでにオフラインで実行でき、すべてのデータはブラウザのlocalStorageに保存されています。しかし、一つの重要な問題があります：ユーザーがデバイスを切り替えたりブラウザデータをクリアしたりすると、すべてのファームデータが失われます。本格的な本番アプリでは、データの永続化とデバイス間同期を考える必要があります。

4.4.1 ローカルストレージの制限

現在使用しているlocalStorageにはいくつかの明らかな制限があります：

制限	説明
デバイスに紐付け	データは現在のデバイスの現在のブラウザにのみ保存される。デバイスを切り替えると失われる
容量制限	通常5〜10MBのストレージ容量のみ
消失しやすい	ブラウザデータのクリアやPWAのアンインストールでデータが失われる
同期不可	スマホの進捗をデスクトップに同期できない

トマトファームが個人的なツールにすぎない場合、これは問題にならないかもしれません。しかし、ユーザーに長期的な投資とデータの蓄積を求める場合、より信頼性の高いソリューションが必要です。

4.4.2 オプション1：クラウド同期（推奨）

最も信頼性の高いソリューションは、データをクラウドデータベースに同期することです。PWAには、Supabaseが優れた選択肢です - PostgreSQLデータベース、リアルタイムサブスクリプション、認証を提供し、無料枠もあります。

実装のアイデア：

1. ユーザーログイン：メールやソーシャルログインでユーザーIDを確立
2. 自動データ同期：毎回の操作が自動的にクラウドに保存
3. オフラインファースト：オフライン時もアプリは動作し、ネットワークが戻ったら自動的に同期
4. デバイス間同期：スマホの進捗がデスクトップですぐに利用可能

プロンプト例：

トマトファームのデータストレージをlocalStorageからSupabaseクラウド同期に移行してください：

**機能要件**
- ユーザーログインの追加（メール+パスワードまたはGoogleログイン）
- ユーザーデータ（ポイント、レベル、農地の状態）をSupabaseデータベースに保存
- オフラインでも動作し、ネットワークが回復したら自動的に同期
- マルチデバイス同期をサポートし、スマホで植えた作物がデスクトップでも見えるようにする

**技術スタック**
- @supabase/supabase-jsクライアントを使用
- 楽観的更新を実装（先にUIを更新し、その後クラウドに同期）
- シンプルな同期ステータスインジケーターを追加

メリット：

• データは失われない。ユーザーはデバイスを切り替えても再度ログインするだけ
• 個人プロジェクトには無料枠で十分
• リアルタイムサブスクリプションをサポートし、良好なマルチデバイス同期体験を提供

デメリット：

• ユーザーの登録/ログインが必要で、使用時の摩擦が増える
• 同期の実行にはネットワーク接続が必要

4.4.3 オプション2：エクスポート / インポート バックアップ

バックエンドサービスを追加したくない場合は、よりシンプルな妥協案は手動バックアップと復元です。

実装のアイデア：

1. エクスポート：ファームデータをJSONファイルにパッケージングし、ユーザーにダウンロードさせる
2. インポート：ユーザーが以前にエクスポートしたJSONファイルを選択してデータを復元
3. 自動リマインダー：定期的にバックアップを促す

プロンプト例：

トマトファームにデータバックアップ機能を追加してください：

**エクスポート**
- 設定ページに「データをエクスポート」ボタンを追加
- localStorageのすべてのデータをJSONファイルにパッケージング
- ユーザーのデバイスに自動的にダウンロード

**インポート**
- JSONファイルを受け入れる「データをインポート」ボタンを追加
- 復元前にファイル形式を検証
- 現在のデータが上書きされるため、インポート前に警告を表示

**自動リマインダー**
- ユーザーが7日以上バックアップしていない場合、フレンドリーなリマインダーを表示

メリット：

• 実装がシンプルで、バックエンドサービス不要
• ユーザーが自分のデータを完全に制御
• エクスポートファイルを共有してデバイス間で転送可能

デメリット：

• 手動操作が必要で、体験がスムーズではない
• ユーザーがバックアップを忘れた場合、データが失われる可能性

4.4.4 オプション3：ブラウザ拡張機能同期（Chromeユーザー向け）

PWAが主にChromeユーザーをターゲットにしている場合、Chrome Storage Sync APIを検討できます。これはChromeが提供するデバイス間同期ストレージサービスで、データがユーザーのGoogleアカウントと自動的に同期します。

注意：これにはPWAをChrome拡張機能としてもパッケージングする必要があり、技術的な経験がある開発者に適しています。

4.4.5 推奨選択戦略

シーン	推奨ソリューション
個人的な軽量ツール	localStorageのみで十分
データ損失を避けたいが、複雑さは避けたい	エクスポート / インポート バックアップ
より良いユーザー体験の本格的な製品	Supabaseクラウド同期
主にChromeユーザー向け	Chrome Storage Sync

トマトファームのようなアプリには、以下を推奨します：

1. MVP段階：localStorageで始めて、製品アイデアを迅速に検証
2. 反復段階：エクスポート / インポート バックアップを追加し、ユーザーにデータのセーフティネットを提供
3. 成熟段階：Supabaseを統合して真のクラウド同期を実現

忘れないでください：プログレッシブエンハンスメントがPWAの核心的な理念です。まずアプリを動くようにしてから、徐々により高度な機能を追加します。

5 オンラインにデプロイ

PWAは正しく動作するためにHTTPS上で実行する必要があります。良いニュースは、主要なデプロイプラットフォームが現在自動的に無料HTTPSを提供していることです。Vercelを例として使用します（NetlifyやGitHub Pagesも使用できます）。

5.1 Vercelにデプロイ

ステップ1：デプロイツールのインストール

Vercelのデプロイツールをインストールしてください

ステップ2：プロジェクトのデプロイ

このプロジェクトをVercelにデプロイしてください。プロジェクト名はtomato-farm-pwaです

AIがデプロイ手順を自動的に処理します。必要なのは：

• アカウントを選択
• 新しいプロジェクトの作成を確認
• 他のオプションはデフォルトのまま

数十秒待つと、Vercelが自動的にプロジェクトをビルドしてデプロイします。完了すると、https://tomato-farm-pwa.vercel.appのようなHTTPS URLが得られます。

ステップ3：PWAの確認

ブラウザでデプロイされたURLを開くと、以下が見えるはずです：

1. アドレスバーの右側にインストールアイコンが現れる
2. DevTools -> Application -> Manifestで、「Tomato Farm」などの設定したアプリ情報
3. Service Workersタブで、Service Workerが有効化されていること

5.2 GitHub Pagesでデプロイ（代替案）

GitHub Pagesを好む場合は、追加のパス設定が必要です：

プロジェクトをGitHub Pagesにデプロイできるように設定を変更してください。
リポジトリ名はtomato-farm-pwaなので、パス設定を適切に調整してください。

その後、ビルド出力をGitHubリポジトリのgh-pagesブランチにプッシュします。

6 スマホにPWAをインストール

これが最もエキサイティングな部分です - トマトファームのウェブページをスマホの「アプリ」に変えます。

6.1 Androidにインストール

1. スマホのChromeブラウザでデプロイされたトマトファームPWAのURLを開く
2. Chromeが自動的に「ホーム画面に追加」プロンプトバナーを表示する場合があります - それをクリックするだけ
3. 自動的に表示されない場合は、右上の三点メニューをタップ -> アプリをインストールまたはホーム画面に追加
4. インストールを確認すると、スマホのホーム画面にトマトファームアプリアイコンが表示されます

開いてみると、ブラウザのアドレスバーやナビゲーションボタンなしでフルスクリーンモードで実行され、ネイティブアプリとほぼ同じように見えます。今すぐいつでも集中と農業を始められます。

6.2 iPhoneにインストール

iOSでは、PWAはSafariブラウザからのみインストールできます（他のブラウザはインストールをサポートしていません）：

1. SafariでデプロイされたトマトファームPWAのURLを開く
2. 下部の共有ボタン（上向き矢印の付いた四角形）をタップ
3. メニューからホーム画面に追加を選択
4. アプリに名前を付けて追加をタップ

iOS 26から、ホーム画面に追加されたすべてのウェブサイトはデフォルトでスタンドアロンアプリモードで開くようになり、これは大きな改善です。

iOSでの既知の制限：

• プッシュ通知にはiOS 16.4以上が必要で、PWAがすでにホーム画面に追加されている必要がある
• Background Syncはサポートされていない
• ストレージ容量はAndroidよりも制限されている

6.3 LighthouseでPWAを監査

GoogleはLighthouseというツールを提供しており、PWAにスコアを付けることができます。Chrome DevTools（F12）-> Lighthouse -> "Progressive Web App"にチェック -> "Analyze page load"をクリック。

合格するトマトファームPWAはPWAカテゴリで満点を取得するはずです。そうでない場合、Lighthouseは正確な理由と修正の提案を教えてくれます。

7 おわりに

おめでとうございます！デスクトップとモバイルの両方にインストールできるポモドーロ農業PWAの構築に成功しました。やったことを振り返りましょう：

1. Vite + Reactでトマトファームウェブアプリを作成
2. vite-plugin-pwaでService WorkerとManifestを追加
3. VercelにデプロイしてHTTPS URLを取得
4. デスクトップとモバイルの両方に正常にインストールし、オフライン機能をテスト

今、トマトファームPWAは以下を実現できます：

• 集中農業：ポモドーロメカニズムでユーザーの集中を支援
• ゲーミフィケーション報酬：植え付け、レベルアップ、アンロックで繰り返しの使用を動機付け
• オフライン使用：ネットワークがなくても、集中、植え付け、ファーム管理が可能
• クロスプラットフォームインストール：一度開発すれば、複数のデバイスにインストール可能

PWAの魅力はその「プログレッシブ性」にあります - 最初から完璧にする必要はありません。まずウェブサイトをインストール可能にし、オフラインで使用できるようにしてから、プッシュ通知やバックグラウンド同期などの高度な機能を徐々に追加していきます。

高度な方向性：

• プッシュ通知：Push API + Notification APIで、ポモドーロ完了時や作物の収穫準備完了時にユーザーにリマインド
• バックグラウンド同期：Background Sync APIで、ネットワークが戻った後にファームデータをクラウドに同期
• よりスマートなキャッシュ戦略：異なる種類のアセットに対して、CacheFirst、NetworkFirst、StaleWhileRevalidateなどの異なるWorkbox戦略を使用
• アプリストアに公開：PWA BuilderでトマトファームPWAをAndroid APKやMicrosoft Storeアプリにパッケージング
• ソーシャル機能：フレンドシステムを追加し、ユーザー同士のファーム訪問や作物交換を可能に

1つのコードベース、全プラットフォーム - これがPWAの力です。集中して、植えて、成長させましょう！

参考文献

• Vite PWA公式ドキュメント
• Google PWA開発ガイド
• MDN Web App Manifestドキュメント
• Workboxキャッシュ戦略の概要
• PWA Builder - PWAをアプリストアに公開