如何建置本機 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 與普通網站與原生應用程式的比較

特性	普通網站	PWA	原生應用程式
安裝	不需要	選配（添加到主畫面）	必須從應用程式商店下載
離線使用	❌ 不能	✅ 可以（快取後）	✅ 可以
更新方式	自動刷新	自動 / 背景更新	使用者手動更新
大小	無	幾百 KB 到幾 MB	數十 MB 以上
開發成本	低	低（一份程式碼）	高（iOS / Android 分開開發）

一句話總結：PWA 是「能儲存自身檔案的網頁」——它具有網站的輕量特性（無需安裝、自動更新），又擁有原生應用程式的體驗（離線支援、可安裝到桌面/主畫面）。

1.2 為什麼選擇 PWA？

在 Vibe Coding 時代，PWA 是最具性價比的「跨平台解決方案」之一：

比較維度	原生應用程式	PWA
開發成本	必須分別開發 iOS / Android / 桌面版	一份程式碼適用所有平台
安裝方式	必須去應用程式商店	直接在瀏覽器中安裝，即時可用
更新方式	使用者必須手動更新	自動更新，使用者無感知
安裝包大小	通常數十 MB	通常只有幾百 KB
離線支援	天然內建	透過 Service Worker 支援
最佳場景	需要深度硬體存取（AR / 藍牙等）	內容展示、工具、輕量級應用程式

一句話總結：如果你的應用程式不需要透過相機的 AR 或藍牙硬體存取，PWA 幾乎是最簡單的選擇。

1.5 教學路線圖

為了讓學習過程不那麼枯燥，本教學圍繞一個有趣且實用的案例——番茄農場。它是一款番茄鐘農場遊戲，將專注工作與遊戲化獎勵結合。配合 AI 編程助手的 Vibe Coding 模式，我們將從零到手機安裝的過程分解為一條可重複使用的路線：

建立認知與環境：了解什麼是 PWA，安裝 Node.js 和 AI 編程助手，確保工具鏈順暢。
建置專案骨架：建立一個可以在本機運行的 React + TypeScript 專案。
AI 疊代開發：透過與 AI 的對話，建置番茄鐘倒計時、農場系統、等級系統、SVG 作物渲染等功能。
PWA 配置與離線測試：添加 Service Worker 和 Manifest，然後驗證離線支援。
部署與手機安裝：部署到 Vercel 取得 HTTPS URL，然後在手機上安裝使用。

本節只描繪大方向，不展開具體指令。現在只需記住主線：環境搭建 → 骨架建置 → AI 描述與生成 → PWA 配置 → 部署交付。接下來的章節，我們將帶你一步步完成。

2 開發環境搭建

2.1 本教學使用的工具

在整個開發過程中，我們同時使用三種工具，分別扮演「設計」、「建置」和「驗收」的角色。

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（長期支援） 版本（本教學基於 Node.js 18.x 或以上版本）。

下載後，像安裝普通軟體一樣雙擊安裝程式，保持預設選項即可。

安裝完成後，開啟終端機（Windows 用 CMD / PowerShell，Mac 用 Terminal）並執行：

bash

node --version
npm --version

如果你看到版本輸出，例如 v18.17.0 和 9.6.7，表示安裝成功。

2.3 安裝 AI 編程助手

AI 編程助手是 Vibe Coding 的主戰場。你可以簡單地將它理解為一個 「內建超級 AI 的編輯器」。

推薦選擇：

Trae：造訪 https://www.trae.cn，下載與你作業系統匹配的版本
Cursor：造訪 https://cursor.sh 並安裝
Claude Code：如果你已經在使用 Claude，可以直接使用 Claude Code

安裝過程非常簡單，就像安裝普通軟體一樣。準備好這個工具後，在後續實踐中我們不再需要盯著枯燥的程式碼視窗，而是在這裡開啟專案，在聊天框中用自然語言讓 AI 寫程式碼、修問題。

2.4 建立新專案

開啟你的 AI 編程助手，在聊天框中輸入以下提示詞：

text

請幫我建立一個名為 tomato-farm-pwa 的 React 專案，用於建置番茄農場應用程式。
它需要支援 TypeScript，並包含 PWA 功能（那種可以安裝到手機主畫面的）。

AI 會自動執行以下步驟：

第一步：建立專案

bash

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

第二步：進入專案並安裝依賴

bash

cd tomato-farm-pwa
npm install

第三步：安裝 PWA 外掛

bash

npm install vite-plugin-pwa -D

AI 完成後，你的專案結構大致如下：

text

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 入口檔案，通常不需要修改

作為初學者，我們主要需要關注三個部分：

App.tsx：控制程式行為，決定「螢幕上出現什麼」
vite.config.ts：配置 PWA 行為，決定「應用程式如何安裝和快取」
public/：存放應用程式圖示和素材

2.6 準備應用程式圖示

PWA 需要圖示才能安裝。至少需要兩張 PNG 圖片，尺寸分別為 192x192 和 512x512。

你可以請 AI 幫忙生成：

text

請幫我生成兩張應用程式圖示，尺寸為 192x192 和 512x512。
使用綠色漸層背景，中間畫一個紅色番茄。儲存到 public 資料夾中。

或者你也可以使用任何設計工具（Figma、Canva）自行建立圖示，並放入 public/ 目錄。

2.7 配置 `vite-plugin-pwa`

這是最關鍵的一步。開啟 vite.config.ts，讓 AI 配置 PWA 外掛：

text

請幫我將 vite.config.ts 改為 PWA 配置，讓網頁可以安裝到手機主畫面：
- 應用程式名稱為「番茄農場」，綠色主題
- 使用 public 目錄中的 icon-192.png 和 icon-512.png 作為圖示
- 啟用自動更新
- 快取所有 js、css、html 和圖片檔案，讓應用程式可以離線使用

AI 會生成類似以下的配置：

typescript

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

在前兩章中，我們已經了解了什麼是 PWA 並完成了環境搭建。從本節開始，我們不再只是紙上談兵，而是進入實際操作。我們將使用 Vibe Coding 模式從零開始建置一款有趣且實用的應用程式——番茄農場。它完美結合了番茄鐘技術與遊戲化激勵，涵蓋了 PWA 開發的核心要素：UI 互動（番茄鐘計時器）、資料儲存（積分和作物）和離線能力（Service Worker 快取）。

現在，讓我們向 AI 發送第一條指令。

3.1 第一個「大師提示詞」：從零到一

在 Vibe Coding 模式下，我們不需要遵循先建立佈局檔案再撰寫邏輯程式碼的傳統方式。我們需要做的是 一次性清楚描述需求，讓 AI 生成第一個可運行的版本。

在 AI 編程助手中開啟我們剛建立的專案目錄，輸入以下提示詞：

text

請幫我撰寫番茄農場應用程式的主頁面，包含以下功能：

**番茄鐘計時器**
- 25 分鐘倒計時，有開始、暫停和重設功能
- 顯示剩餘時間和進度條
- 完成一次專注後給使用者 10 積分

**農場系統**
- 3 塊農地，但最初只有第一塊可用；後面的需要升級後解鎖
- 一個種子商店：胡蘿蔔 5 積分，番茄 10 積分，玉米 15 積分
- 購買種子並種植後，作物慢慢成長，成熟後可以收割獲得積分

**等級系統**
- 根據總積分升級：0-100 積分 = 初級農夫，100-300 = 熟練農夫，300 以上 = 農場大師
- 升級後解鎖新農地和更好的種子

**UI 設計**
- 頂部顯示等級、積分和升級進度條
- 中間顯示番茄鐘倒計時
- 下方是農地網格
- 底部有商店按鈕
- 使用綠色主題，外觀清新可愛
- 必須適配手機螢幕

**資料儲存**
- 所有資料（積分、等級、農地狀態）必須儲存，刷新頁面不會遺失

發送後，你會看到 AI 開始推理和分析你的專案結構。幾秒鐘後，它會直接生成 App.tsx 的完整程式碼。

從它的回覆中，我們可以看到它的推理邏輯和互動邏輯
我們可以直接看到它修改了哪些程式碼
如果對結果不滿意，我們可以回滾到之前的版本

3.2 運行與預覽（本機開發伺服器）

現在 AI 已經完成了第一輪開發，但請記住：我們在編程助手中看到的還只是程式碼的「藍圖」，而不是真正可互動的應用程式。我們需要啟動一個本機開發伺服器，才能實際運行程式碼並查看真實效果。

在 AI 編程助手的終端機中執行：

bash

npm run dev

幾秒鐘後，終端機會顯示如下輸出：

text

  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 圖形，讓它們有成長動畫」，複雜的程式碼幾乎瞬間就會出現。

第一步：準備 SVG 作物素材

你可以請 AI 直接在程式碼中繪製 SVG，或者準備 SVG 檔案放在 public/ 目錄下。本教學建議讓 AI 直接生成 SVG 程式碼，因為更靈活。

第二步：發送疊代指令

回到 AI 編程助手，輸入以下提示詞：

text

請讓作物看起來更好，並添加成長動畫：

**作物圖形**
- 胡蘿蔔：橘色身體配綠色葉子
- 番茄：紅色圓形配小綠葉
- 玉米：黃色玉米穗配綠色外葉
使用簡單的形狀即可

**成長動畫**
- 剛種下時，從小苗開始，逐漸成長到成熟
- 顯示 3 個階段

**收割效果**
- 點擊成熟作物時，播放簡單的收割動畫
- 顯示獲得了多少積分

**整體潤飾**
- 農地格子應有邊框和背景色
- 作物應在格子中居中顯示
- 整體風格要更可愛一些

AI 會再次修改程式碼，處理 SVG 渲染和動畫邏輯。完成後刷新瀏覽器，你應該會看到更好的作物圖形和流暢的成長動畫。

3.4 添加音效與通知（選配）

如果你想讓番茄農場更有沉浸感，也可以添加音效和通知。這也只需要一個簡單的提示詞：

text

請為番茄農場添加音效和通知：

**音效**
- 專注開始時播放一聲「叮」
- 專注完成時播放勝利音效
- 種植和收割也添加匹配的音效

**通知**
- 一個專注週期結束後顯示「恭喜，你完成了一次專注！」
- 升級時顯示「恭喜，你升級到了 XX！」
- 解鎖新農地時顯示「你解鎖了新的農地！」

AI 會幫你添加音效和通知，讓番茄農場更生動有趣。

4 在本機體驗 PWA

4.1 建置與預覽

PWA 的 Service Worker 只在正式版建置中生效（開發模式下不會註冊）。所以我們需要先建置，再預覽：

text

請幫我執行以下指令：
1. npm run build（建置正式版本）
2. npm run preview（啟動本機預覽伺服器）

建置完成後，Vite 會將所有檔案生成到 dist/ 目錄中，包括自動生成的 sw.js（Service Worker）和 manifest.webmanifest。

預覽伺服器啟動後，開啟終端機中顯示的網址（通常是 http://localhost:4173）。

4.2 在桌面上安裝 PWA

開啟預覽網址後，你會注意到瀏覽器網址列右側出現了一個 安裝圖示（通常是一個小下載箭頭或「+」號）。

Chrome / Edge 安裝步驟：

點擊網址列右側的安裝圖示
在彈出的對話框中點擊安裝
PWA 會在獨立視窗中開啟，並在桌面 / 開始選單 / Dock 中建立快捷方式

安裝後的 PWA 看起來就像原生桌面應用程式——沒有網址列，沒有分頁，有自己的視窗和圖示。現在你可以在任何時候開啟番茄農場，開始你的專注與農場之旅。

macOS Safari 安裝步驟：

在 Safari 中開啟 PWA 網址
從選單列點擊 檔案 -> 加入 Dock
PWA 圖示會出現在 Dock 中

4.3 測試離線能力

這是 PWA 最酷的部分。讓我們驗證離線模式是否真的有效：

確保 PWA 已經在瀏覽器中開啟過至少一次（這樣 Service Worker 才能快取資源）
斷開網路（關閉 Wi-Fi 或拔掉網路線）
刷新頁面——你會發現 番茄農場仍然正常載入！
開始一個番茄鐘——完成後你獲得積分，購買種子，種植作物——所有資料仍然正常儲存在 localStorage 中

你也可以開啟 Chrome 開發者工具（F12）-> Application -> Service Workers 來檢查 Service Worker 狀態和快取的資源列表。

4.4 資料持久化與同步選項

現在你的番茄農場已經可以離線運行，所有資料都儲存在瀏覽器的 localStorage 中。但有一個關鍵問題：如果使用者更換裝置或清除瀏覽器資料，所有農場資料都會遺失。 對於正式的產品應用程式，我們需要考慮資料持久化和跨裝置同步。

4.4.1 本機儲存的限制

我們目前使用的 localStorage 有幾個明顯的限制：

限制	說明
裝置綁定	資料只儲存在目前裝置的目前瀏覽器中；更換裝置就會遺失
容量有限	通常只有 5-10MB 的儲存空間
容易遺失	清除瀏覽器資料或解除安裝 PWA 會導致資料遺失
無法同步	手機上的進度無法同步到桌面

如果你的番茄農場只是個人工具，這可能不是問題。但如果你希望使用者長期投入並積累資料，就需要更可靠的解決方案。

4.4.2 方案一：雲端同步（推薦）

最可靠的解決方案是將資料同步到雲端資料庫。對於 PWA 來說，Supabase 是一個絕佳的選擇——它提供 PostgreSQL 資料庫、即時訂閱和身份驗證，還有免費方案。

實作思路：

使用者登入：使用電子郵件或社交登入建立使用者身份
自動資料同步：每次操作自動儲存到雲端
離線優先：應用程式離線時仍然可用，網路恢復後自動同步
跨裝置同步：手機上的進度在桌面上立即可用

提示詞範例：

text

請幫我將番茄農場的資料儲存從 localStorage 遷移到 Supabase 雲端同步：

**功能需求**
- 添加使用者登入（電子郵件 + 密碼或 Google 登入）
- 將使用者資料（積分、等級、農地狀態）儲存到 Supabase 資料庫
- 離線時仍然可用，網路恢復後自動同步
- 支援多裝置同步，手機上種的作物在桌面也能看到

**技術堆疊**
- 使用 @supabase/supabase-js 客戶端
- 實作樂觀更新（先更新 UI，再同步到雲端）
- 添加簡單的同步狀態指示器

優點：

資料不會遺失；使用者更換裝置只需重新登入
免費方案足以應付個人專案
支援即時訂閱，提供良好的多裝置同步體驗

缺點：

需要使用者註冊/登入，增加了使用摩擦
需要網路連線才能執行同步

4.4.3 方案二：匯出 / 匯入備份

如果你不想添加後端服務，一個更簡單的折衷方案是 手動備份與還原。

實作思路：

匯出：將農場資料打包為 JSON 檔案，讓使用者下載
匯入：使用者可以選擇之前匯出的 JSON 檔案來還原資料
自動提醒：定期提醒使用者備份

提示詞範例：

text

請為番茄農場添加資料備份功能：

**匯出**
- 在設定頁面添加「匯出資料」按鈕
- 將 localStorage 中的所有資料打包為 JSON 檔案
- 自動下載到使用者的裝置

**匯入**
- 添加「匯入資料」按鈕，接受 JSON 檔案
- 還原前驗證檔案格式
- 匯入前顯示警告，因為會覆蓋目前資料

**自動提醒**
- 如果使用者超過 7 天沒有備份，顯示友善的提醒

優點：

實作簡單，不需要後端服務
使用者完全掌控自己的資料
可以透過分享匯出檔案跨裝置轉移

缺點：

需要手動操作，體驗不夠流暢
如果使用者忘記備份，資料仍可能遺失

4.4.4 方案三：瀏覽器擴充功能同步（適用於 Chrome 使用者）

如果你的 PWA 主要面向 Chrome 使用者，可以考慮 Chrome Storage Sync API。這是 Chrome 提供的跨裝置同步儲存服務，資料會自動與使用者的 Google 帳號同步。

注意： 這需要將 PWA 同時打包為 Chrome 擴充功能，更適合有技術經驗的開發者。

4.4.5 推薦選擇策略

場景	推薦方案
個人輕量工具	只用 `localStorage` 就夠了
想避免資料遺失，但不想太複雜	匯出 / 匯入備份
正式產品，追求更好的使用者體驗	Supabase 雲端同步
主要面向 Chrome 使用者	Chrome Storage Sync

對於番茄農場這樣的應用程式，我的建議是：

MVP 階段：先用 localStorage 快速驗證產品想法
疊代階段：添加匯出/匯入備份，讓使用者有資料保障
成熟階段：整合 Supabase 實現真正的雲端同步

請記住：漸進式增強 是 PWA 的核心理念。先讓應用程式跑起來，再逐步添加更高級的能力。

5 部署上線

PWA 必須在 HTTPS 下運行才能正常工作。好消息是，現在主流的部署平台都自動提供免費的 HTTPS。我們以 Vercel 為例（你也可以使用 Netlify 或 GitHub Pages）。

5.1 部署到 Vercel

第一步：安裝部署工具

text

請幫我安裝 Vercel 的部署工具

第二步：部署專案

text

請幫我將這個專案部署到 Vercel。專案名稱是 tomato-farm-pwa

AI 會自動處理部署步驟。你只需要：

選擇你的帳號
確認建立新專案
其他選項保持預設

等待幾十秒後，Vercel 會自動建置並部署你的專案。完成後，你會得到一個 HTTPS 網址，例如 https://tomato-farm-pwa.vercel.app。

第三步：驗證 PWA

在瀏覽器中開啟部署後的網址，你應該會看到：

網址列右側出現安裝圖示
在 DevTools -> Application -> Manifest 中，你配置的應用程式資訊，例如名稱「Tomato Farm」
在 Service Workers 標籤中，Service Worker 顯示為已啟動

5.2 使用 GitHub Pages 部署（替代方案）

如果你偏好使用 GitHub Pages，需要額外的路徑配置：

text

請幫我修改配置，讓專案可以部署到 GitHub Pages。
我的倉庫名稱是 tomato-farm-pwa，請相應調整路徑配置。

然後將建置輸出推送到 GitHub 倉庫的 gh-pages 分支。

6 在手機上安裝 PWA

這是最令人興奮的部分——將你的番茄農場網頁變成手機上的「應用程式」。

6.1 在 Android 上安裝

在手機的 Chrome 瀏覽器 中開啟你部署的番茄農場 PWA 網址
Chrome 可能會自動顯示 「添加到主畫面」 的提示橫幅——直接點擊即可
如果沒有自動顯示，點擊右上角的 三點選單 -> 安裝應用程式 或 添加到主畫面
確認安裝，番茄農場的應用程式圖示就會出現在手機的主畫面上

開啟它，你會發現它以全螢幕模式運行，沒有瀏覽器網址列或導航按鈕，看起來幾乎和原生應用程式一模一樣。現在你可以在任何時候開始專注和經營農場。

6.2 在 iPhone 上安裝

在 iOS 上，PWA 只能透過 Safari 瀏覽器安裝（其他瀏覽器不支援安裝）：

在 Safari 中開啟你部署的番茄農場 PWA 網址
點擊底部的分享按鈕（帶有向上箭頭的方形圖示）
在選單中選擇 加入主畫面
為應用程式命名，然後點擊加入

從 iOS 26 開始，所有添加到主畫面的網站都會預設以獨立應用程式模式開啟，這是一個重大改進。

iOS 上的已知限制：
推送通知需要 iOS 16.4 或以上版本，且 PWA 必須已添加到主畫面
不支援 Background Sync
儲存空間比 Android 上更有限

6.3 使用 Lighthouse 審查你的 PWA

Google 提供了一個名為 Lighthouse 的工具，可以為你的 PWA 打分。開啟 Chrome 開發者工具（F12）-> Lighthouse -> 勾選「Progressive Web App」-> 點擊「Analyze page load」。

一個合格的番茄農場 PWA 應該在 PWA 類別中獲得滿分。如果沒有，Lighthouse 會告訴你具體原因並建議修復方法。

7 結語

恭喜！你已經成功建置了一個可以安裝在桌面和手機上的番茄鐘農場 PWA。讓我們回顧一下做了什麼：

使用 Vite + React 建立了番茄農場網頁應用程式
透過 vite-plugin-pwa 添加了 Service Worker 和 Manifest
部署到 Vercel 取得了 HTTPS 網址
成功在桌面和手機上安裝，並測試了離線功能

現在你的番茄農場 PWA 已經能夠實現：

專注農場：透過番茄鐘機制幫助使用者保持專注
遊戲化獎勵：用種植、升級、解鎖來激勵持續使用
離線可用：即使沒有網路，使用者仍然可以專注、種植、管理農場
跨平台安裝：一次開發，安裝到多種裝置上

PWA 的魅力在於它的「漸進性」——你不需要一開始就做到完美。先讓網站可以安裝和離線使用，然後逐步添加推送通知、背景同步等更高級的功能。

進階方向：

推送通知：使用 Push API + Notification API 在番茄鐘結束時或作物成熟時提醒使用者
背景同步：使用 Background Sync API 在網路恢復後將農場資料同步到雲端
更智慧的快取策略：對不同類型的資源使用不同的 Workbox 策略，如 CacheFirst、NetworkFirst 和 StaleWhileRevalidate
發佈到應用程式商店：使用 PWA Builder 將番茄農場 PWA 打包為 Android APK 或 Microsoft Store 應用程式
社交功能：添加好友系統，讓使用者可以互相參觀農場和交換作物

一份程式碼，所有平台——這就是 PWA 的力量。專注、種植、成長！

如何建置本機 PWA 應用程式：將網站變成「真正的應用程式」 ​

1 什麼是 PWA 與 PWA 開發 ​

1.1 PWA 的定義 ​

為什麼普通網站不能離線使用，而 PWA 可以 ​

PWA 與普通網站與原生應用程式的比較 ​

1.2 為什麼選擇 PWA？ ​

1.5 教學路線圖 ​

2 開發環境搭建 ​

2.1 本教學使用的工具 ​

2.2 安裝 Node.js ​

2.3 安裝 AI 編程助手 ​

2.4 建立新專案 ​

2.5 了解專案結構 ​

2.6 準備應用程式圖示 ​

2.7 配置 vite-plugin-pwa ​

3 建置番茄農場 PWA ​

3.1 第一個「大師提示詞」：從零到一 ​

3.2 運行與預覽（本機開發伺服器） ​

3.3 最佳化疊代（添加 SVG 作物和動畫） ​

3.4 添加音效與通知（選配） ​

4 在本機體驗 PWA ​

4.1 建置與預覽 ​

4.2 在桌面上安裝 PWA ​

4.3 測試離線能力 ​

4.4 資料持久化與同步選項 ​

4.4.1 本機儲存的限制 ​

4.4.2 方案一：雲端同步（推薦） ​

4.4.3 方案二：匯出 / 匯入備份 ​

4.4.4 方案三：瀏覽器擴充功能同步（適用於 Chrome 使用者） ​

4.4.5 推薦選擇策略 ​

5 部署上線 ​

5.1 部署到 Vercel ​

5.2 使用 GitHub Pages 部署（替代方案） ​

6 在手機上安裝 PWA ​

6.1 在 Android 上安裝 ​

6.2 在 iPhone 上安裝 ​

6.3 使用 Lighthouse 審查你的 PWA ​

7 結語 ​

參考資料 ​

如何建置本機 PWA 應用程式：將網站變成「真正的應用程式」

1 什麼是 PWA 與 PWA 開發

1.1 PWA 的定義

為什麼普通網站不能離線使用，而 PWA 可以

PWA 與普通網站與原生應用程式的比較

1.2 為什麼選擇 PWA？

1.5 教學路線圖

2 開發環境搭建

2.1 本教學使用的工具

2.2 安裝 Node.js

2.3 安裝 AI 編程助手

2.4 建立新專案

2.5 了解專案結構

2.6 準備應用程式圖示

2.7 配置 `vite-plugin-pwa`

3 建置番茄農場 PWA

3.1 第一個「大師提示詞」：從零到一

3.2 運行與預覽（本機開發伺服器）

3.3 最佳化疊代（添加 SVG 作物和動畫）

3.4 添加音效與通知（選配）

4 在本機體驗 PWA

4.1 建置與預覽

4.2 在桌面上安裝 PWA

4.3 測試離線能力

4.4 資料持久化與同步選項

4.4.1 本機儲存的限制

4.4.2 方案一：雲端同步（推薦）

4.4.3 方案二：匯出 / 匯入備份

4.4.4 方案三：瀏覽器擴充功能同步（適用於 Chrome 使用者）

4.4.5 推薦選擇策略

5 部署上線

5.1 部署到 Vercel

5.2 使用 GitHub Pages 部署（替代方案）

6 在手機上安裝 PWA

6.1 在 Android 上安裝

6.2 在 iPhone 上安裝

6.3 使用 Lighthouse 審查你的 PWA

7 結語

參考資料