選擇技術：網頁 App、PWA 還是手機 App

上一堂課，你寫好了「小習慣」的 spec.md。在請 Claude 動手之前，還有一個決定要做：用什麼技術做？

如果你問 Claude「我要做一個習慣 App」，它可能給你 React、Next.js、Expo、Flutter、Firebase……一長串名詞。每一個都是好工具，但對第一次做 App 的人來說，選錯工具就像學開車第一天就開聯結車。

這堂課幫你看懂這幾條路的差別，然後我們會說明：為什麼「小習慣」第一版選擇最樸素的一條。

做 App 的四條路

四條路不是誰比較高級，而是各自適合不同的需求。

1. 網頁 App（Web App）

就是在瀏覽器裡打開的網站，只是它不只給你看文章，還能讓你操作，例如記帳、填表、打卡。用 HTML（畫面結構）、CSS（外觀）、JavaScript（互動邏輯）寫成。任何有瀏覽器的裝置都能用，分享一個網址就好。

2. PWA（Progressive Web App，漸進式網頁應用程式）

PWA 是「升級版的網頁 App」。在網頁 App 上多加兩樣東西：

• 一個 manifest.json：告訴手機這個 App 叫什麼、圖示長怎樣、打開時要不要隱藏網址列。
• 一個 service worker：在背景幫你把檔案存在手機裡，沒網路也能打開。

加上這兩樣，使用者就能把它「加到主畫面」，點圖示打開時看起來和一般 App 幾乎一樣。我們在第五堂課會親手做這件事。

3. 跨平台 App（React Native／Expo、Flutter）

寫一份程式碼，產生可以上架 App Store 和 Google Play 的真正手機 App。能用到更多手機功能，例如背景執行、更完整的通知、藍牙。代價是要學框架、要裝更多開發工具、上架要付費開發者帳號並通過審核。

4. 原生 App（iPhone 用 Swift、Android 用 Kotlin）

直接用手機平台官方的語言開發，效能和功能最完整。但 iPhone 和 Android 要各寫一份，而且開發 iPhone App 需要 Mac 電腦。通常是有團隊、有明確需求的產品才走這條路。

一張表比較

	網頁 App	PWA	跨平台 App	原生 App
要學的東西	HTML、CSS、JS	同左，再加 manifest 和 service worker	React Native 或 Flutter 框架	Swift 或 Kotlin，各一套
使用者怎麼取得	打開網址	打開網址，再加到主畫面	從商店下載	從商店下載
上架審核	不需要	不需要	需要，且要付費開發者帳號	需要，且要付費開發者帳號
改版速度	上傳就生效	上傳就生效（使用者下次打開時更新）	送審通過才更新	送審通過才更新
離線使用	通常不行	可以	可以	可以
手機特殊功能	有限	中等，iPhone 上限制較多	多	最完整
適合	工具、表單、後台	個人工具、小型服務、第一版驗證	需要上架或特殊功能的產品	對效能、硬體要求很高的產品

商店的開發者帳號費用和審核規定會調整，需要時請以 Apple Developer 和 Google Play Console 官方說明為準。

為什麼「小習慣」選 PWA

回頭看我們的 spec.md，第一版要的是：新增習慣、打卡、連續天數、一週小格子、備份、加到主畫面、離線可用。把這些需求對照上面的表，PWA 剛好全部做得到，而且：

• 一份程式碼，手機電腦都能用。 你在電腦上開發、在電腦上測，手機上一樣能跑。
• 不用上架、不用審核。 今天做好，今天就能傳網址給朋友。
• 改版很快。 發現 bug，修好上傳，朋友下次打開就是新版。第六堂課的「持續改版」會很有感。
• 工具最少。 不用安裝框架或手機模擬器，有瀏覽器和 Claude Code 就能開始。
• Claude 很熟。 HTML、CSS、JavaScript 是網路上最常見的程式碼之一，Claude 寫起來穩定，你看不懂時請它解釋也最容易。

還有一個常被忽略的好處：你看得懂。 不用框架的話，整個 App 就是三、四個檔案，打開就能讀。對正在學習的你來說，「看得懂自己的 App」比「用了最潮的工具」重要得多。

什麼時候該換更大的工具

PWA 不是終點。當你遇到下面這些情況，就是升級的訊號：

你遇到的情況	可以考慮
畫面越來越多（五個以上），JavaScript 檔案越寫越亂	換成 React、Vue 這類前端框架，幫你管理畫面和狀態
想在手機和電腦之間同步資料，或要讓家人共用	加上後端服務，例如 Supabase 或 Firebase（第四堂課會說明）
需要登入帳號	同上，這些服務都內建登入功能
一定要出現在 App Store、Google Play	換成 Expo（React Native）或 Flutter
需要背景定位、藍牙、穩定的定時通知	跨平台或原生 App

好消息是：你在這個單元學到的東西都不會浪費。規格怎麼寫、資料怎麼設計、怎麼帶著 Claude 一步一步做、怎麼測試和改版，換成任何技術都一樣適用。

從上往下回答三個問題，大多數「解決自己生活問題」的小工具都會落在 PWA。

把技術決定寫進 spec.md

做完決定，記得補進規格。這段文字很短，但很重要：它讓 Claude 知道「這是刻意的選擇」，不會因為覺得 React 比較好，就自動幫你改寫。

## 技術決定
- 形式：PWA（網頁 App ＋ manifest.json ＋ service worker）
- 語言：純 HTML、CSS、JavaScript，不用框架、不用建置工具
- 資料：存在瀏覽器 localStorage，不需要伺服器和登入
- 為什麼：第一版要快速驗證「我會不會每天用」，不需要上架商店
- 什麼時候重新評估：需要跨裝置同步、或畫面超過五個時

如果你對某個選擇沒把握，可以請 Claude 幫你分析。重點是要它根據你的規格回答，而不是給你一份通用的技術清單。