計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
使用者不只在桌上型電腦——手機、平板、桌面 App 都是前端戰場。建立從 mobile-first 到 PWA、從 React Native 到 Tauri、從 Touch events 到 Safe Area 的完整跨平台前端能力。讓讀者知道何時該做 PWA、何時該走 RN、何時該純 Web。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | Mobile 前端跟桌面前端差在哪 | 01-mobile-vs-desktop | 🌱 | 螢幕尺寸、輸入方式（touch vs mouse）、網路條件、電池考量、瀏覽器差異、行動裝置的限制 |
| 02 | Cross-platform 取捨總覽 | 02-cross-platform-overview | 🌱 | Web / PWA / Hybrid / RN / Flutter / 純 Native 的光譜，每個點的 tradeoff |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 03 | 為什麼 Mobile-first 不是選配 | 03-why-mobile-first | 🌱 | 全球行動流量 60%+、Google Mobile-first indexing、行動優先的 CSS 會寫得比較簡潔、從小到大比從大到小容易 |
| 04 | 為什麼需要 PWA（vs 純 web / 純 native） | 04-why-pwa | 🌱 | Native app 上架成本高、Web 沒離線能力、PWA 解的中間地帶、what PWA 能做 what 還不能做 |
| 05 | 為什麼前端工程師該懂 RN（Web 不夠嗎） | 05-why-react-native | 🌱 | Native 效能、App Store 分發、Push / IAP / Wallet、Web 無法企及的能力、RN 讓前端工程師能寫 mobile |
| 06 | 為什麼 Responsive ≠ Mobile-friendly | 06-responsive-vs-mobile-friendly | 🌱 | RWD 只解排版、Mobile-friendly 要考量 touch target / viewport / font size / 連線狀態，兩者差在哪 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 07 | 行動網站演進 | 07-mobile-web-evolution | 🌱 | m.xxx.com 獨立行動站 → Responsive Design（2010）→ Mobile-first → AMP（棄用）→ Core Web Vitals 行動信號 |
| 08 | PWA 演進 | 08-pwa-evolution | 🌱 | AppCache（棄）→ Service Worker（2014）→ Web App Manifest → Installable → Play Store 支援 PWA（2019）→ Project Fugu 補齊能力 |
| 09 | Cross-platform 演進 | 09-cross-platform-evolution | 🌱 | PhoneGap（2009）→ Cordova → Ionic → React Native（2015）→ Flutter（2018）→ Expo Router → Capacitor → Lynx / Tauri Mobile |
| 10 | Desktop App 演進 | 10-desktop-app-evolution | 🌱 | Electron（2013，肥）→ Tauri（2022，Rust 輕量）→ Lynx（2024）→ PWA 當桌面應用 |
🧠 知識型
行動 Web
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 11 | Responsive vs Adaptive Design | 11-responsive-vs-adaptive | 🌱 | 流動 vs 斷點切換、使用場景、SEO 含意 |
| 12 | Mobile-first CSS | 12-mobile-first-css | 🌱 | min-width query 先寫小螢幕、為什麼從小到大比較乾淨、Container Query 的影響 |
| 13 | Touch Events vs Mouse Events | 13-touch-vs-mouse | 🌱 | Pointer Events 統一、Touch 特有事件（touchstart / touchmove）、hover 在 touch 裝置的問題、pointer-events |
| 14 | Viewport Meta 與 Safe Area | 14-viewport-safe-area | 🌱 | viewport-fit=cover、env(safe-area-inset-*)、iPhone notch / Dynamic Island、Android gesture bar |
| 15 | 行動裝置效能考量 | 15-mobile-performance | 🌱 | 慢 CPU / 低記憶體 / 行動網路、throttling in DevTools、效能預算、圖片重量、JS parse 時間 |
PWA
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 16 | PWA 基礎 | 16-pwa-basics | 🌱 | 三要素（HTTPS + Manifest + SW）、Lighthouse PWA audit、installable criteria |
| 17 | Web App Manifest | 17-web-app-manifest | 🌱 | icons / start_url / display / theme_color / shortcuts、跨平台差異 |
| 18 | Service Worker for PWA | 18-sw-for-pwa | 🌱 | 快取策略（stale-while-revalidate / network-first / cache-first）、版本升級、清舊 cache |
| 19 | Push Notifications | 19-push-notifications | 🌱 | Push API + Notification API、VAPID、iOS Web Push 支援（2023+） |
| 20 | Background Sync / Periodic Sync | 20-background-sync | 🌱 | 斷網時排隊、定時背景任務、使用情境 |
| 21 | PWA 上架 App Store | 21-pwa-app-store | 🌱 | Google Play（Trusted Web Activity）、App Store 政策、PWABuilder |
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 22 | React Native | 22-react-native | 🌱 | JS bridge → New Architecture (Fabric + TurboModules)、共用 code 比例、效能特性 |
| 23 | Expo 生態 | 23-expo | 🌱 | managed workflow、Expo Router、EAS Build / Submit / Update、什麼時候該 eject |
| 24 | Flutter（對前端工程師的意義） | 24-flutter-for-web-devs | 🌱 | Dart 語言、非 Web renderer、生態差異、什麼情況考慮 Flutter |
| 25 | Ionic + Capacitor | 25-ionic-capacitor | 🌱 | Web-based native、共用 web code 近 100%、效能 tradeoff |
Desktop App
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 26 | Electron | 26-electron | 🌱 | Chromium + Node.js、bundle size 爭議、實務大廠（VS Code / Slack / Discord）為什麼還用 |
| 27 | Tauri（Rust-based） | 27-tauri | 🌱 | 跟 Electron 對比、bundle size、Rust learning curve、v2 mobile 支援 |
| 28 | Lynx / React Native Desktop | 28-lynx-rn-desktop | 🌱 | 2024 新興、跨平台 native UI 新思維 |
跨平台實務
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 29 | 共用 code vs 平台特化 | 29-shared-vs-platform-specific | 🌱 | 共用 business logic、UI 特化到什麼程度、monorepo 組織策略 |
| 30 | App Store / Play Store 上架流程 | 30-app-store-submission | 🌱 | 審核重點、icon / screenshot 規範、拒絕常見原因、reviewer guide |
| 31 | OTA Update 策略 | 31-ota-update | 🌱 | Expo Updates / CodePush、什麼能 OTA 什麼不能、Apple 政策、version pinning |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 32 | PWA from Zero | 32-pwa-from-zero | 🌱 | Vite 專案加 SW + Manifest + 離線、Lighthouse 達到 100 |
| 33 | RN 第一支 App | 33-first-rn-app | 🌱 | Expo 快速起手、Expo Router、發到 TestFlight / internal testing |
| 34 | Tauri 第一支 Desktop | 34-first-tauri-app | 🌱 | 從 React + Vite 包成 Tauri、打包 size 比較 Electron |
| 35 | 行動裝置 debug 工具鏈 | 35-mobile-debugging | 🌱 | Safari Web Inspector（iOS）、Chrome Remote Debug（Android）、WebView debug、Proxyman 攔截流量 |
| 36 | Touch Gesture 實作 | 36-touch-gestures | 🌱 | swipe / pinch / long-press、@use-gesture/react、框架中的 touch 處理 |
| 37 | Safe Area / Notch 處理 | 37-safe-area-handling | 🌱 | env() 實戰、status bar / home indicator、跨 iOS / Android 差異 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 38 | Mobile Anti-patterns | 38-mobile-anti-patterns | 🌱 | 小 touch target（< 44×44px）、hover-only UI、viewport 鎖 user-scalable=no、離開頁面沒警告（form 資料遺失）、RN 跟 Web 全部共用 render（效能爛）、Electron 40MB 的 Hello World、忘記 prefers-reduced-motion |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 39 | Mobile / Cross-platform 工具 | 39-mobile-tooling | 🌱 | Lighthouse Mobile、PWABuilder、Expo DevTools、Flipper（RN debug）、Xcode / Android Studio 基本、BrowserStack / Sauce Labs 裝置雲 |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | Foldable / Dual Screen 支援 | s01-foldable-support | 🌱 | Galaxy Fold / Surface Duo、CSS Viewport Segments、experiential API |
| S02 | Apple Vision Pro / WebXR | s02-vision-pro-webxr | 🌱 | Spatial Web、WebXR API、空間 UI 設計原則 |
| S03 | Progressive Enhancement for Low-end | s03-progressive-enhancement | 🌱 | 舊手機 / 低階 Android 使用者、bundle size 戰略、HTML-first 思維回歸 |
| S04 | 行動裝置網速 / 離線實戰 | s04-mobile-network-offline | 🌱 | 斷網 UX、重試策略、資料同步、Local-first 跨 CH7 |
章節進度統計
- 知識主題：39 + 4 補充 = 43 項
- 🌿 growing：0
- 🌱 seed：43
跨系列連結
- →
frontend/browser/ CH4（Service Worker、Touch Events、Viewport API、Push API）
- →
frontend/css/ CH2（Mobile-first、Container Query）
- →
frontend/framework/ CH6（React Native 跟 React 的關係）
- →
frontend/a11y/ CH12（Mobile a11y：VoiceOver / TalkBack）
- →
frontend/engineering/ CH9 F11（行動效能）
- →
frontend/architecture/ CH7（Local-first / CRDT 行動場景）