原生 App 與漸進式網頁應用（PWA）：你需要哪一種？

原生 App（native app）是專為 iOS 或 Android 打造，並從 App Store 或 Google Play 安裝的應用程式。**漸進式網頁應用（PWA）**則是一個可以安裝到手機主畫面的網站，會以自己的全螢幕視窗開啟、擁有自己的圖示，不需經過任何商店。原生 App 能取得最深的裝置存取權限；PWA 則能用同一套程式碼與同一個連結觸及各個平台，而且更新立即生效。

對大多數第一版產品來說（工具、入口網站、追蹤器、預約與訂購 app），PWA 已經足夠。只有當商店曝光或深層裝置功能是產品的核心時，才需要原生 App。

用 AI 開發時，為什麼這很重要

多數 AI app 製作工具產出的是網頁應用。這不是什麼捷徑，而是這類工具的強項，因為網頁應用可以在同一個地方完成撰寫、預覽與發布。但這也代表「這會變成手機上的 app 嗎？」有一個明確的答案：它會是一個行為像 app 的網站，而且只要你提出要求，它就能安裝為 PWA。

了解 PWA 能做與不能做的事，可以讓你及早做決定，避免在確認之前就向客戶承諾「會上架 App Store」，也能避免設計出網頁無法穩定實現的功能（例如背景定位追蹤）。

日常比喻：餐車 vs 商場裡的店面

原生 App 就像商場裡的店面。商場（應用程式商店）帶來人潮與信任，但你得付租金、遵守商場的規則，而且在更換店面外觀之前都要等待核准。

PWA 則像一台擁有忠實客群的餐車。沒有房東，你今晚就能換菜單，認識你的人在任何地方都找得到你。但商場走廊上不會有人路過順便逛進來，你也無法安裝櫃檯式的冷凍庫。

各自能做什麼

表格中幾個名詞的說明：

• Service Worker： 瀏覽器在背景為你的網站執行的一小段腳本。它讓 app 能離線開啟、快取資料，並接收推播訊息。
• 網頁應用程式清單（Web app manifest）： 一個小檔案，用來告訴瀏覽器 app 的名稱、圖示、顏色，以及應以全螢幕（「standalone」）而非瀏覽器分頁開啟。

iPhone 與 iPad：容易出錯的細節

Apple 的平台是 PWA 與原生 App 差異最大的地方，因此值得講得精確。根據 Apple 的 WebKit 團隊與 Google 的 web.dev，截至 2026 年 9 月的狀況如下：

• 安裝需要手動操作。 Chrome 等 Android 瀏覽器可以顯示安裝提示。iPhone 與 iPad 沒有自動提示，使用者需點選分享，然後點選加入主畫面。自 iOS 16.4 起，iOS 上的其他瀏覽器也能從分享選單提供「加入主畫面」。
• 加入主畫面的網站在 iOS 26 預設以網頁應用開啟。 WebKit 宣布，自 iOS 與 iPadOS 26 起，凡加入主畫面的項目都會在自己的視窗中開啟，除非使用者關閉「以網頁應用程式開啟」。正確的 manifest 對於名稱、圖示與行為依然重要。
• 推播通知需要先安裝。 網頁推播於 iOS 與 iPadOS 16.4 起支援主畫面上的網頁應用。在 Safari 分頁中開啟的 PWA 無法接收推播；使用者必須先安裝，再允許通知，而且權限請求必須在使用者點擊例如「開啟通知」按鈕之後才出現。圖示上的標記數字也是在同一時間推出的。
• 深層硬體存取仍然有限。 某些 Android 瀏覽器支援的藍牙配件與 NFC 等功能，Safari 並未提供。

實務上的結論是：如果你的產品完全仰賴通知來提醒使用者，那麼許多從未安裝 app 的 iPhone 使用者將永遠收不到。請規劃電子郵件或簡訊作為備援。

進入 App Store 與 Google Play

如果你確實需要商店上架，請事先了解成本與規則。根據 Apple 與 Google 各自的網站，截至 2026 年 9 月，Apple 開發者計畫每年 99 美元，Google Play 開發者帳號則是一次性 25 美元。每個 iOS 版本都要經過 App Review。Apple 的準則表示，app 應提供超越重新包裝網站的功能與介面，因此把 PWA 包進一層薄薄的原生外殼，有被拒絕的風險。

實例：健身房的會員 App

一家小型健身房希望會員能預約課程、查看會員資格，並在上課前一小時收到提醒。

PWA 路線。 打造一個響應式網頁應用，包含登入、課表與預約功能。加入 manifest 與圖示，讓會員可以安裝；加入 Service Worker，讓課表即使在訊號不佳時也能開啟。提醒則透過推播送給已安裝的使用者，並以電子郵件寄給其他人。它只需發布一次，就能在每支手機與筆電上運作，健身房也能當天調整課表版面。

原生會勝出的情況。 如果健身房之後想加入門口的藍牙信標打卡功能、串接 Apple 健康的運動數據，或是在鎖定畫面顯示今日課程的小工具，這些都屬於原生的範疇。若會員期待在商店中搜尋「健身房 app」就能找到，也是原生的情境。

許多團隊正是這樣做：先用 PWA 驗證會員是否真的會使用，若某些特定功能或商店曝光值得投入成本，再考慮原生。

常見錯誤與迷思

• 「PWA 是較低階的 app。」 對於表單、清單、預約、儀表板與內容型產品，安裝之後使用者往往分不出差別。
• 「PWA 無法在 iPhone 上運作。」 其實可以。限制在於安裝的門檻，以及通知必須先安裝才能收到，基本功能本身沒有問題。
• 以為推播能到達每一位使用者。 在 iPhone 上，推播只會送到已安裝 app 並同意接收的人。
• 承諾無法上架的 App Store app。 在承諾商店上架之前，請先確認你的製作工具實際能產出什麼。
• 建立用不到的離線編輯功能。 快取頁面以便離線開啟很簡單；離線編輯資料並在之後同步，則是真正的工程。

向 AI 製作工具要求什麼

若要做 PWA，請講清楚：

• 「請把它做成可安裝的 PWA：提供網頁應用程式 manifest，包含名稱、短名稱、圖示（包括 Apple touch icon），並設定為 standalone 顯示。」
• 「加入一個 Service Worker，快取 app 的基本外殼，讓它在沒有網路時也能開啟，並顯示清楚的離線訊息。」
• 「新增一個『安裝此 app』說明頁，分別提供 Android 與 iPhone（點選分享，然後加入主畫面）的步驟。」
• 「如果我們加入通知功能，請在使用者點擊按鈕之後才請求權限，並以電子郵件作為備援。」

行動版網頁應用開發指南提供完整的提示詞與手機優先的設計檢查清單。如果你還在決定第一版該包含哪些功能，請閱讀什麼是 MVP；若要比較預算，請參考開發 app 要花多少錢。

PWA 與 Mythex

Mythex 開發的是網頁應用，你可以在發布前用手機尺寸的預覽檢查每一個畫面。PWA 的 manifest、圖示與 Service Worker，都是你可以在對話中像其他功能一樣要求的項目，發布後的 app 只要一個連結就能在任何手機上使用。在 Pro 方案中，Mythex 也能把網頁應用包裝成 Android 與 iPhone app，使用 Capacitor 技術，並送到 Google Play 內部測試與 TestFlight：這是一種混合式 app，其畫面是網頁畫面，而非完全原生的 UI。要開始的話，可以瀏覽 app 範本或 AI 網頁應用製作工具。

常見問題