2025-03-18-PWA（Progressive Web App）是一種介於網站與原生 App 之間的應用程式形式
2025-03-18-PWA（Progressive Web App）是一種介於網站與原生 App 之間的應用程式形式
✅ 一句話解釋：
PWA（Progressive Web App）是一種介於網站與原生 App 之間的應用程式形式。
它讓你用 網頁技術（HTML/CSS/JavaScript），就能打造出：
📱 可以安裝、離線運作、像 App 一樣體驗的網站應用程式
✅ PWA 的核心特性：
| 特性 | 說明 |
|---|---|
| 📲 可安裝 | 用戶可以將 PWA 加到手機主畫面，像原生 App 一樣打開（沒瀏覽器地址列） |
| ⚡ 快速啟動 | 預先快取，開啟速度幾乎像原生 App |
| 📡 離線可用 | 就算網路斷線也能使用（依靠 Service Worker 技術） |
| 🔔 支援推播通知 | 可以發送通知（需要用戶授權） |
| 🔒 HTTPS 安全 | 必須透過 HTTPS 執行，保障安全 |
✅ PWA VS 原生 App VS 一般網站
| 功能比較 | 傳統網站 | 原生 App | PWA（介於中間） |
|---|---|---|---|
| 安裝在桌面/手機 | ❌ 不行 | ✅ 可以 | ✅ 可以 |
| 離線使用 | ❌ 不行 | ✅ 可以 | ✅ 可以 |
| 推播通知 | ❌ 不行 | ✅ 可以 | ✅ 可以 |
| 商店上架 | ❌ 不適合 | ✅ 必須 | ❌ 可免除上架流程 |
| 更新方式 | ✅ 自動更新 | ❌ 需重新上架 | ✅ 像網站一樣自動更新 |
| 開發技術 | HTML/JS/CSS | 原生程式語言 | HTML/JS/CSS（＋PWA規範） |
✅ 實際例子（你可能已經在用）
| 服務 | 是否提供 PWA |
|---|---|
| Twitter（https://mobile.twitter.com） | ✅ |
| Instagram 網頁版 | ✅ |
| Starbucks 網頁點餐（https://app.starbucks.com） | ✅ |
| Google 地圖網頁版（m版） | ✅ |
當你用 Chrome 打開這些網站，看到「🔽 安裝 App」提示，就是因為它們是 PWA。
✅ PWA 的技術基礎
| 技術 | 說明 |
|---|---|
| Service Worker | 背景 JS 程式，負責離線快取、背景同步、推播等功能 |
| Web Manifest | JSON 設定檔，定義 App 名稱、圖示、顏色、啟動方式 |
| HTTPS | 所有 PWA 必須部署在 HTTPS 上才能使用這些能力 |
✅ 為什麼要做 PWA？
- 成本低：用網頁技術就能做出類似 App 的效果
- 跨平台：同一套程式可跑在 Android、iOS、桌面、瀏覽器
- 好維護：跟網站一樣，更新直接上傳就好，不需重新上架
- 使用者體驗佳：像 App 一樣順、快、漂亮
✅ 小結：
PWA 是網站與 App 的混血兒：用網頁寫的，但有原生 App 的體驗。
適合用來開發行動裝置友善的 App-like 體驗，又不用走傳統 App 上架流程。