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

原生應用程式是專為 iOS 或 Android 而建、並透過 App Store 或 Google Play 安裝的應用程式。**漸進式網頁應用程式（PWA）**則是一個可以安裝到手機主畫面的網站，會在自己獨立的全螢幕視窗中開啟，有自己的圖示，無需經過應用程式商店。原生應用程式可以最深入地存取裝置；PWA 則只需一套程式碼和一個連結，就能覆蓋所有平台，並且即時更新。

對大部分首個版本而言，例如工具、入口網站、追蹤器、預約和訂購應用程式，PWA 已經足夠。只有當應用程式商店的搜尋曝光或深度裝置功能是產品的核心時，才需要原生應用程式。

為何在用 AI 建構時這點重要

大部分 AI 應用程式生成工具產出的都是網頁應用程式。這不是捷徑，而是這些工具的強項，因為網頁應用程式可以在同一個地方編寫、預覽和發佈。但這也意味著「這會是我手機上的應用程式嗎？」這個問題有一個特定答案：它會是一個行為似應用程式的網站，如果你要求的話，也可以安裝為 PWA。

了解 PWA 能做和不能做的事，能讓你及早決定，免得在答應客戶「會上架 App Store」之前，或在設計某項功能（例如背景位置追蹤）時，才發現網頁無法可靠地實現。

日常例子：流動餐車與商場店舖

原生應用程式好比商場裡的一間店舖。商場（應用程式商店）帶來人流和信任，但你要付租金、遵守商場規則，並且在更改店面之前要等待審批。

PWA 則好比一輛擁有忠實顧客的流動餐車。沒有業主要你遷就，你今晚就可以更改餐牌，認識你的人無論身在何處都能找到你。但商場走廊裡不會有人路過，你也無法安裝步入式冷凍庫。

各自能做什麼

表格中的幾個術語：

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

iPhone 和 iPad：容易令人踩中的細節

Apple 的平台是 PWA 與原生應用程式差異最大的地方，所以值得講清楚。截至 2026 年 9 月，根據 Apple 的 WebKit 團隊和 Google 的 web.dev：

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

實際的結論是：如果你的整個產品都依賴通知提醒用戶，那麼許多從未安裝應用程式的 iPhone 用戶將永遠看不到這些通知。請預先計劃電郵或短訊作為後備方案。

上架應用程式商店

如果你確實需要在商店上架，要先了解成本和規則。截至 2026 年 9 月，根據 Apple 與 Google Play 各自的網站，Apple 的開發者計劃每年收費 US$99，Google Play 開發者帳戶則是一次性 US$25。每個 iOS 版本都要經過 App Review 審核。Apple 的指引要求應用程式提供超越重新包裝網站的功能和介面，因此把 PWA 包在一個薄薄的原生外殼中，有被拒的風險。

實例：健身室的會員應用程式

一間小型健身室希望會員能預約課堂、查看會籍，並在課堂前一小時收到提醒。

PWA 路線。 建立一個響應式網頁應用程式，包括登入、課程時間表和預約功能。加入清單和圖示，讓會員可以安裝；加入 service worker，讓時間表即使在訊號差時也能開啟。向已安裝的用戶以推送發送提醒，向其他人則以電郵發送。它只需發佈一次，可在所有手機和電腦上運作，而健身室可以當天更改時間表版面。

原生會較適合的情況。 如果健身室日後想加入以藍牙信標在門口登記入場的功能、與 Apple 健康整合以記錄運動，或在鎖定畫面顯示今日課堂的小工具，這些都屬於原生的範疇。若會員期望能在商店中搜尋「健身室應用程式」並找到它，也是原生的情況。

很多團隊都是這樣做：先以 PWA 證明會員確實在用，之後如有特定功能或需要商店曝光，才值得投資開發原生版本。

常見錯誤與誤解

• 「PWA 是較次等的應用程式。」 對於表單、清單、預約、儀表板和內容而言，安裝後用戶往往分辨不出兩者的分別。
• 「PWA 無法在 iPhone 上運作。」 其實可以。限制在於安裝步驟較繁瑣，以及通知需要先安裝，而不在於基本功能。
• 假設推送會送到每個人。 在 iPhone 上，推送只會送到已安裝應用程式並同意接收通知的人。
• 承諾一個無法交付的 App Store 應用程式。 在承諾上架之前，先確認你的生成工具會產出什麼。
• 建構你不需要的離線編輯功能。 快取頁面以便離線開啟很簡單；離線編輯資料再同步則是實實在在的工程。

向你的 AI 生成工具要求什麼

若要建立 PWA，請講明白：

• 「製作一個可安裝的 PWA：包含網頁應用程式清單，當中有名稱、短名稱、圖示（包括 Apple touch icon）以及 standalone 顯示模式。」
• 「加入一個 service worker，快取應用程式外殼，使其在沒有連線時也能開啟，並顯示清楚的離線訊息。」
• 「加入一個「安裝此應用程式」的說明頁，分別列出 Android 和 iPhone 的步驟（分享，然後加入主畫面）。」
• 「如果我們加入通知，只在用戶點擊按鈕後才要求許可，並以電郵作為後備。」

行動版網頁應用程式建構指南包含完整的提示詞和以手機為先的設計清單。如果你仍在決定首個版本應包含什麼，請閱讀什麼是 MVP；如需預算比較，請參閱建構應用程式需要多少成本。

PWA 與 Mythex

Mythex 建構網頁應用程式，你可以在發佈前用手機尺寸的預覽檢查每個畫面。PWA 清單、圖示和 service worker 都是你可以在對話中像其他功能一樣要求的項目，發佈後的應用程式可透過單一連結在任何手機上使用。在 Pro 方案中，Mythex 還可以用 Capacitor 把網頁應用程式包裝成 Android 和 iPhone 應用程式，並傳送到 Google Play 內部測試和 TestFlight：這是一個混合式應用程式，其畫面是網頁畫面，而非完全原生的介面。若要開始，可瀏覽應用程式範本或AI 網頁應用程式建構工具。

常見問題