PWA 是 Progressive Web App 的縮寫，中文稱為漸進式網頁應用程式：用網頁技術開發，卻能提供接近 App 的使用體驗，例如安裝到裝置、從主畫面圖示開啟、以獨立視窗執行，並可依設計支援離線使用與推播通知。它本質上仍是網站，有網址、能被搜尋引擎收錄，一套程式碼可在不同系統上執行，但安裝方式與可用功能依瀏覽器與作業系統而定。核心任務在瀏覽器就能完成、又希望使用者常回來時，值得評估 PWA；需要大量裝置功能或商店曝光時，再考慮原生 App。
PWA 的意思：可以安裝的網站
MDN 的定義是：PWA 是用網頁平台技術建置，但提供類似特定平台 App 使用體驗的應用程式。傳統網站比較像使用者造訪的地方，不打開瀏覽器就不存在於裝置上，也高度依賴網路；原生 App 則安裝在裝置上，有自己的圖示，可以在背景運作。PWA 結合兩者：保留網站以網址分享、被搜尋引擎收錄、不必經過商店的優點，又能安裝到裝置、在沒有網路時運作、接收伺服器推送的訊息，並透過作業系統顯示通知。
web.dev 也提醒，PWA 就是一個網頁應用程式，安裝圖示或離線功能無法使用時，它仍應該在瀏覽器裡正常運作。所以 pwa是什麼，可以理解成先做好網站，再加上 App 的能力。
PWA 的組成：資訊清單與 Service Worker
- 網頁應用程式資訊清單（Web App Manifest）：描述 App 名稱、圖示、起始網址與顯示方式的檔案。MDN 說明 PWA 必須有資訊清單；Chromium 系列瀏覽器要求清單包含名稱或簡稱、指定尺寸的圖示、起始網址與顯示模式，而且不能設定成優先改用對應的原生 App。
- HTTPS：要能安裝，網站必須以 HTTPS 提供，開發測試時可以使用本機位址。
- Service Worker：在背景執行的程式，像位於網頁、瀏覽器與網路之間的代理伺服器，可以攔截網路請求、在離線時提供快取內容，也是推播通知與背景同步的基礎。它只能在 HTTPS 等安全環境中使用，也不能直接存取網頁元素。
MDN 註明 Service Worker 不是安裝的必要條件，但許多 PWA 會用它提供離線體驗。換句話說，一個已經使用 HTTPS 的響應式網站，補上資訊清單與圖示，就具備被安裝的基本條件；離線與推播則要靠 Service Worker 另外設計。
PWA、原生 App 與 RWD 網站比較
| 比較項目 | RWD 網站 | PWA | 原生 App |
|---|---|---|---|
| 取得方式 | 輸入網址或從搜尋進站 | 網址開啟，可再安裝，也可打包上架商店 | 從 App Store、Google Play 下載 |
| 主畫面圖示 | 無，在瀏覽器中使用 | 安裝後有，可獨立視窗開啟 | 有 |
| 離線使用 | 高度依賴網路 | 依 Service Worker 的快取設計 | 可以 |
| 推播通知 | 一般要先加上 Service Worker 才能使用 | 支援程度依瀏覽器與系統而定 | 可以 |
| 裝置功能 | 依瀏覽器開放的介面 | 依瀏覽器開放的介面 | 可使用相機、定位等系統功能 |
| 更新方式 | 部署後生效 | 部署後生效，快取更新要另外設計 | 透過商店發布新版本，使用者更新後生效 |
| 搜尋引擎 | 可收錄 | 可收錄 | 以商店內搜尋為主 |
MDN 對響應式網頁設計的定義，是讓網頁在各種螢幕尺寸與解析度都能良好呈現並維持可用性。PWA 可以建立在響應式網站之上，兩者不是二選一；真正要取捨的，是 PWA 和原生 App。
各平台支援差異：依瀏覽器與系統而定
MDN 說明，從網頁安裝 PWA 的介面依瀏覽器與平台而不同，規劃前先確認目標使用者的裝置：
- 桌機：Chromium 系列瀏覽器在支援的桌面作業系統上，可以安裝具備資訊清單的 PWA；macOS 的 Safari 可用「加入 Dock 中」；Firefox 不支援以資訊清單安裝 PWA。
- Android：會以 WebAPK 形式安裝的，只有具備 Google 行動服務裝置上的 Chrome，以及三星裝置上的 Samsung Internet，其他瀏覽器則是在主畫面加上帶有瀏覽器標記的捷徑。
- iPhone 與 iPad：要由使用者從瀏覽器的分享選單加入主畫面，較早的系統版本只能透過 Safari，網站也無法用程式觸發安裝提示。WebKit 說明，推播只開放給已加入主畫面的網頁應用程式，且必須在使用者直接操作後才能請求通知權限；部分系統版本還要把資訊清單的顯示模式設為獨立視窗或全螢幕。
- App 內建瀏覽器：web.dev 指出，在 Android 與 iOS 上，使用者無法從許多 App 內建的瀏覽器安裝 PWA；從通訊軟體連結進站的人，可能要先改用系統瀏覽器開啟。
適合用 PWA 的情境
- 內部作業工具：例如跨平台的手機盤點系統、巡檢回報或外勤紀錄，員工用指定的瀏覽器安裝即可使用，不必經過商店上架。
- 會員查詢與預約：查點數、看預約、填表單這類在瀏覽器就能完成的任務。
- 內容型網站：希望讀者把網站加到主畫面，並依快取設計，在網路不穩時仍能讀到看過的內容。
- 先驗證需求：還不確定使用者會不會經常使用，先以 PWA 上線觀察，再決定是否投入 App。
這些情境的共同點是：核心任務不依賴瀏覽器支援有限的裝置功能，而且網站本身要先做好。若行動版體驗都還沒處理，應先改善響應式網站，再談安裝與離線。
PWA 的限制與不適合的情況
- 裝置功能受瀏覽器限制：web.dev 提到部分平台缺少 Web Bluetooth、Web NFC 等整合介面，MDN 也建議 PWA 對進階功能先做偵測，不支援時提供替代做法。
- 使用者不一定會安裝：沒有商店頁面曝光，iOS 又要使用者自己從分享選單加入，網站上需要說明安裝方式。
- 推播有前提：在 iPhone 上要先加入主畫面才收得到推播，行銷規劃不能假設每位訪客都會收到。
- 快取更新要規劃：快取策略設計不當，使用者可能持續看到舊內容。
如果核心功能依賴藍牙連接設備這類瀏覽器支援有限的能力，或品牌需要在商店被搜尋到，原生或跨平台 App 會比較合適，開發階段與上架準備可參考App 開發流程的整理。
PWA 開發的規劃步驟
- 確認網站基礎：全站 HTTPS、響應式版面，主要頁面在手機上能順利載入。
- 決定安裝後的樣子：名稱、圖示、起始頁與顯示模式，寫進資訊清單。
- 列出離線範圍：哪些頁面要能離線瀏覽、離線時送出的表單怎麼處理，再據此設計快取。
- 規劃更新機制：新版本部署後，舊快取何時更新、要不要提示使用者重新整理。
- 實機測試：在目標使用者的手機與瀏覽器上測試安裝、離線、推播與更新，包含從 App 內建瀏覽器進站的情況。
常見問題
PWA 可以上架 App Store 或 Google Play 嗎？
可以，但要符合各商店的規則。MDN 說明符合安裝條件的 PWA 可以打包後上架商店；上架 App Store 時，Apple 要求 App 的功能、內容與介面要超越重新包裝的網站，只把網站包起來可能無法通過審核。
PWA 可以發推播通知嗎？
可以，但支援程度依瀏覽器與系統而定。在 iPhone 與 iPad 上，網頁要先被加入主畫面，並在使用者直接操作後才能請求通知權限，規劃時不能假設所有訪客都會收到。
PWA 對 SEO 有影響嗎？
PWA 仍是網站，頁面可以透過網址被搜尋引擎收錄。重點和一般網站相同：內容要能被檢索，不要讓重要內容只存在於需要登入或只在快取中出現的畫面。
已有響應式網站，改成 PWA 要重做嗎？
不一定要重做。在使用 HTTPS 的響應式網站上加入資訊清單與圖示，就具備安裝的基本條件；需要離線或推播時，再加上 Service Worker 與相關設定，工作量依功能範圍而定。
PWA 和 App 該怎麼選？
先列出核心任務需要哪些功能。在瀏覽器就能完成、不需要商店曝光時，PWA 能用一套網頁程式碼直接發布；依賴瀏覽器支援有限的裝置功能時，硬做 PWA 反而要花更多時間變通，改評估原生或跨平台 App。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
先確認目標使用者的裝置與瀏覽器、核心任務需要哪些裝置功能，以及是否需要商店曝光。京采的網頁設計服務可以協助評估 PWA、響應式網站或 App 的適合度，規劃資訊清單、離線範圍與背後的 API，並在實機上測試安裝流程；想討論現有網站能否升級，歡迎與我們聯繫。
