一套後端、三個平台：網頁、iOS、Android。以陽明交大消防員健康促進研究計畫所用的 FireHealth 平台為例，依公開技術說明，兩個行動版本在 2025 年 1 月 25 日同一天啟動，用的都是 Vue 3 加 TypeScript 的 PWA 架構，沒有另外寫兩套原生 App。這就是 PWA 最吸引人的地方：同一份網頁技術，照顧所有裝置。
PWA 是什麼？
PWA（Progressive Web App，漸進式網頁應用程式）是用網頁技術做的應用程式。依 Google 的 web.dev 說明，PWA 用現代瀏覽器的功能強化網頁，讓一份程式碼就能觸及任何裝置上的使用者；安裝之後可以從主畫面啟動，並且在網路不穩時仍能使用。
簡單說：它本質上是網站，但用起來像 App。
PWA 和原生 App 差在哪？
| 比較項目 | PWA | 原生 App |
|---|---|---|
| 開發 | 一套網頁程式碼，各裝置共用 | iOS 與 Android 通常各寫一套 |
| 安裝 | 從瀏覽器加入主畫面，不經 App Store | 從 App Store 或 Google Play 下載 |
| 更新 | 使用者下次開啟就是新版 | 要送審、使用者要更新 |
| 離線 | 可以，視設計而定 | 可以 |
| 推播 | 可以，但 iOS 有條件（見下一節） | 完整支援 |
| 裝置功能 | 受瀏覽器開放的範圍限制 | 能用到最多系統功能 |
iOS 能不能用 PWA？
可以，但有兩件事要知道。
安裝方式不一樣。 在 iPhone 或 iPad 上，用 Safari 開啟網站，點「分享」按鈕，再選「加入主畫面」，PWA 就會像 App 一樣出現在主畫面上。這一步要主動教使用者，最好在網站上放一張圖解。
推播有條件。 依 Apple WebKit 官方部落格，iOS 與 iPadOS 從 16.4 版開始支援網頁推播，但只限「已加入主畫面的網頁 App」。也就是說，使用者沒有把網站加到主畫面，就收不到推播。
我們怎麼用 PWA 同時做出 iOS 與 Android 版
FireHealth 是消防員健康管理平台，公開技術說明列出三個平台：網頁、iOS WebApp、Android WebApp，列出的後端服務只有一個 API。兩個行動版本都採用和網頁版相同的 Vue 3 與 TypeScript 架構，所以能在同一天啟動，不必各自從頭寫一套原生程式。
這種做法最適合功能以表單、問卷、資料查詢與圖表為主的應用：不需要深度使用手機硬體，卻需要三個平台的資料完全同步。
什麼情況還是該做原生 App？
- 需要大量使用相機、藍牙、感測器等裝置功能
- 推播是核心功能，而且不能要求使用者先加入主畫面
- 必須出現在 App Store 或 Google Play，讓使用者用搜尋找到
- 對動畫與效能要求很高，例如遊戲
決定走 PWA 之前，先問自己三個問題
- 使用者多半用什麼手機？ iPhone 使用者比例高，就要把「加入主畫面」的教學做好，推播也要照 iOS 的條件設計。
- 推播是不是非有不可？ 如果整個服務靠推播提醒才運作，而使用者又不太會自己加入主畫面，原生 App 可能比較穩。
- 資料要不要跨裝置同步？ 同一個人會在電腦和手機之間切換使用時，PWA 加上一套共用的後端，維護起來最省力。
三題想清楚，大致就知道 PWA 能不能順利推出去。
如果你的需求介於兩者之間，可以到聯絡頁描述功能，我們一起評估哪一種比較適合。
常見問題
PWA 是什麼？
PWA 是用網頁技術做的應用程式，一份程式碼可以在手機與電腦上使用，能安裝到主畫面，並在網路不穩時繼續運作。
iPhone 怎麼安裝 PWA？
用 Safari 開啟網站，點「分享」按鈕，選擇「加入主畫面」即可。安裝後會像一般 App 一樣出現在主畫面上。
PWA 在 iOS 上可以推播嗎？
可以，但有條件。依 Apple WebKit 官方說明，iOS 與 iPadOS 16.4 起支援網頁推播，只限已加入主畫面的網頁 App。
PWA 有哪些缺點？
能使用的裝置功能受瀏覽器限制、iOS 推播需要先加入主畫面、無法像原生 App 一樣在應用程式商店被搜尋到。需要深度使用硬體或上架商店時，原生 App 比較合適。
最後更新：