跳至主要內容
木生的筆記本個人學習・日文資料・旅行與其他

網站技術

兼具 Web 的高擴散性與 Native App 的優異體驗

PWA (Progressive Web App) 是什麼? 它會取代傳統 iOS / Android 原生 App 嗎?

不用去 App Store 下載數百 MB 的檔案,打開網頁就能「一鍵安裝至主畫面」、支援離線使用與推播通知。本文全面拆解 PWA 的技術原理、與原生 App 的核心差異以及企業選型決策模型。

全球頂尖網路巨頭已全面擁抱 PWA:
Twitter (X) Lite AliExpress Spotify Web App Starbucks PWA Trivago
核心概念定義

什麼是 PWA (漸進式 Web 應用)?

PWA 全名為 Progressive Web App(漸進式 Web 應用程式),是由 Google 於 2015 年提出的網頁應用技術標準。簡單來說,它就是「擁有原生 App 外觀與功能的現代化網站」

Progressive 漸進增強

1. 漸進式適應所有裝置

不論使用者的瀏覽器版本多舊,都能當作普通網頁瀏覽;而當瀏覽器支援新特性時,會自動升級並解鎖「新增至主畫面」、「推播」等強大功能。

Web 超連結擴散

2. 具備網頁的超連結特性

無需經過 iOS App Store 或 Google Play 商店漫長的審查與下載安裝。使用者點擊一個網址(URL)或掃描 QR Code 即可立即開啟使用。

App-like 原生體驗

3. 原生 App 般的流暢感

點擊桌面圖示開啓時無網址列、支援全螢幕顯示、離線無網路存取(Offline First)、背景數據同步以及主機推播通知。

深度比對矩陣

PWA vs 原生 App (Native) vs 傳統網站

一表搞懂三種應用開發架構在發布、開發成本、效能與體驗上的根本差異。

比較維度 PWA (漸進式 Web) 原生 App (iOS / Android) 傳統網站 (Traditional Web)
發布與安裝方式 網頁直接「新增至主畫面」,無需經過商店審查 須經 App Store / Google Play 審查並下載 (數十MB) 僅能在瀏覽器內透過網址開啟,不可安裝至桌面
跨平台開發成本 極低 (一套 HTML/JS 跨 iOS, Android, PC) 極高 (需要 iOS Swift + Android Kotlin 或 RN/Flutter) 極低 (一套網頁適用所有螢幕)
SEO 搜尋引擎收錄 完全支援 (可被 Google 索引引流) 不支援 (封閉在 App 內,無法被搜尋) 完全支援
離線運作能力 (Offline) 支援 (透過 Service Worker 快取) 完全支援 (本地資源包) 無網路即顯示「恐龍斷網」頁面
系統推播通知 (Push) 支援 (Android 完整;iOS 16.4+ 亦已支援) 完全支援 (系統最高優先級) 不支援 (離開分頁即無法推播)
更新升級機制 無感無縫更新 (重設或重新載入網頁即完成) 被動更新 (依賴使用者前往應用商店手動更新) 即時更新 (重新整理頁面)
商店與支付政策 依付款方式與適用規範而定 依商店方案與政策而定 依發布與付款方式而定
技術底層解析

構成 PWA 的三大核心技術柱石

一個普通網站只需要補齊這三個組件,就能轉型升級為 PWA 應用。

01

Service Worker

背景腳本與網路代理

運行在瀏覽器背景的獨立 JavaScript 執行緒。它就像是 App 的中繼代理伺服器 (Proxy),負責攔截網路請求、處理離線快存 (Cache API)、背景同步數據與發送推播通知。

02

Web App Manifest

manifest.json 清單檔案

一個 JSON 格式的設定檔,定義了 App 的名稱、桌面 Icon 圖示、啟動畫面背景色 (Splash Screen)、顯示模式 (`standalone` 隱藏網址列) 以及螢幕旋轉方向。

03

HTTPS 加密安全傳輸

SSL / TLS Protocol

由於 Service Worker 具備攔截所有 API 請求的強大權限,為了避免遭中間人攻擊 (MITM),PWA 規範嚴格要求全站必須建立在 HTTPS 安全加密連線之上。

現代 Web API 能力表

PWA 能做到哪些裝置與硬體存取?

許多人以為網頁做不到硬體呼叫,但現代瀏覽器 (Project Fugu) 已開放了大部分原生權限。

GPS 定位 (Geolocation)

廣泛支援

相機與麥克風

廣泛支援

主機推播 (Web Push)

iOS 16.4+ / Android 支援

離線瀏覽 (Service Worker)

廣泛支援

Apple Pay / Google Pay

透過 Payment Request API

Web Bluetooth 藍牙連接

Chrome/Android 支援 (iOS 受限)

FaceID / 生物辨識

透過 WebAuthn API

高載重底層運算

弱於 Native (但可使用 WebAssembly)
互動選型工具

專案技術選型評估器

依照五個產品情境,比較 PWA 與原生 App 的相對適合度;結果僅作為初步討論依據。

初步選型結果

較適合先評估 PWA

PWA:5
Native:0

實務常見疑難

常見迷思與 FAQ 解答

參考資料與延伸閱讀

本文參考下列官方資料。規格與政策可能變動,實際操作前請確認最新說明。