PWA 教學優點解析與開發全攻略: 小編的技術開箱：什麼是漸進式增強？為什麼您的網站應該升級成 PWA？ | 前端三分鐘

文章目錄

1. 什麼是 PWA (Progressive Web App)？
2. 什麼是 Progressive Web App？網頁與原生應用的完美結合
1. 2.1. Progressive Web App 優點對比分析
3. Progressive Web App 在商業上的幫助
4. Web App 開發建議：如何一步步實作 PWA？
5. PWA 漸進式增強
6. PWA 有什麼好處，值得我們將站台升級嗎?
7. 將 PWA 上架到市集
8. Progressive Web App 的未來
1. 8.1. Project Fugu
9. FAQ：Progressive Web App 常見問題

什麼是 PWA (Progressive Web App)？

PWA (漸進式網路應用程式) 是一種透過現代網頁技術（如 Service Worker 與 Web App Manifest）建構的應用程式，旨在提供兼具網頁跨平台優勢與原生 App（Native App）流暢體驗的方案。其核心包含三大支柱：Progressive（漸進式增強，確保在任何瀏覽器都能運作並隨效能增強體驗）、Web（基於開放的網路標準）與 App（具備主畫面圖示、推播通知與離線存取能力）。PWA 的目標是讓網頁在效能、互動與視覺上無限接近原生 App，同時保有網頁易於搜尋與無需下載安裝包的優點。

Progressive Web App (PWA) 這個名詞背後蘊含了三個核心概念：

Progressive：漸進式增強，根據瀏覽器能力提供對應體驗。
Web：使用最前沿的 Web API。
App：建立具備原生感的跨平台應用程式。

簡單來說，PWA 的目標是透過現代化網頁技術，讓體驗與效能無限接近原生 App。接下來，小編會帶著大家一起開箱 PWA，聊聊這項由 Google 工程師 Alex Russell 於 2015 年提出的革命性概念。到底漸進式增強有多強？我們接著看下去！

什麼是 Progressive Web App？網頁與原生應用的完美結合

Progressive Web App 透過一系列瀏覽器技術的組合，讓網頁除了原本的跨平台優勢外，也能擁有 Native App 的流暢體驗。小編在這邊大膽預測：將網站優化成 PWA，將會是未來所有高品質網站的標準配備。

Progressive Web App 優點對比分析

Native App：雖然效能強大、支援離線，但下載門檻高，取得較不方便。
傳統網頁：唯一觸及全平台的管道且容易被搜尋，但無法完整使用硬體功能。
PWA 的優勢：網頁容易被搜尋並能透過連結被安裝使用，更深度整合硬體資源。

那 Progressive Web App 可靠嗎?

這個問題其實是問 Service Worker 在各瀏覽器上的運作穩定了嗎?

隨著瀏覽器的技術進步，這個答案是肯定的。目前已經有蠻多採用 PWA 的大公司，也可以發現 PWA 會以 Lite 來做命名，來增加產品的觸及和普及。

IG Lite
Twitter Lite
Youtube TV
Telegram Z

Chrome OS 執行 PWA
https://www.ithome.com.tw/news/137000

隨著 Google PWA 開發上進展 Chromebook 用戶也能在 Play Store 下載 Twitter 及 Youtube TV 的 PWA。

目標是透過現代化瀏覽器讓 PWA 在任何平臺上都能順暢執行 (Windows、ChromeOS、macOS、iOS、Android)，去解決像是 Chrome OS 裝置跑 Android App 效能低落的問題。

Progressive Web App 在商業上的幫助

PWA 在不改變使用者習慣的前提下，能夠直接優化商業型的網站

透過 Responsive Design 來優化不同裝置的體驗
提供主畫面上的 Icon 讓使用者不需透過瀏覽器執行 Web Apps

在商業的應用上可以做到:

增加觸及，Web 是唯一管道可以觸及全部平台
比起網頁可以增加更多互動
減少安裝的容量損耗
對於較差的硬體能得到更好的效能
提供 “Lite” 輕量化的體驗

小編趁這次開箱也翻譯整理了樂天 24 優化站台成 PWA 後所帶來的好處給大家參考。

Web App 開發建議：如何一步步實作 PWA？

PWA 提供了一種新的設計哲學。在進行 Web App 開發建議 時，小編整理了三個核心實作步驟：

推薦安裝提示：讓 App 具備可安裝性。
Manifest: PWA 配置檔：定義 App 的名稱、Icon 與啟動模式。
Service Worker 實作：負責處理離線快取及推播通知。

因為這些實作，讓 App 能夠漸進式的增強，而一般使用者在正常使用上是分別不出來是不是 PWA。

一個完整的 PWA 主要包含以下功能，而 Chrome 也提供了 Lighthouse 來評估是否完整達到 PWA 的規範

底下列出更完整 PWA 的原則:

Discoverable: 網頁本來就能夠被搜尋引擎爬取
Installable: 需要完成適當配置讓 App 能夠被安裝
Linkable: 可以透過連結分享
Re-engageable: 可以接收推播互動
Secure: 必須要透過 https 提供安全的保證
Network independent: 可以離線運作或用快取運行
Progressively enhanced: 漸進式的增強，瀏覽器越新支援的功能就越多
Responsively designed: 透過 RWD 的設計能夠讓更多裝置使用

PWA 漸進式增強

PWA 其實不是新的觀念，經過 6 年的演變也真的跟名稱一樣一直都在進行漸進式的增強 (Progressive Enhancement)，舉例來說，近幾年 Chrome 也一直在不斷進步，最近連 NFC 也能透過網頁直接讀取。

有個計劃是 Project Fugo，會將開發中與即將開發的先進技術記錄在這個專案進程中，這其中有個重點，就是有在這個專案中的功能，大家就先不要急著先自己實作。

// 因為在不久的將來我們只需要
if ("厲害的功能" in Window) {
  // 來點厲害功能吧
}

PWA 有什麼好處，值得我們將站台升級嗎?

即開即用: 安裝後能透過 Service Workers 快取資源，減少載入時間有機會做到即開即用
更版升級快速: 可以做到只更新有改變的相關資源，比起 Native app 相對每次更新的修改都較小
提升操作體驗: Icon、啟動畫面、全螢幕執行的操作體驗都更接近 Native App
更好的互動: 透過接受推播能夠有更好的互動體驗

將 PWA 上架到市集

目前 Progressive Web App 能透過工具搭配幾乎零開發成本的打包就能上架到以下市集:

Play Store (Chrome OS)
Micorsoft Store
Samsung Galaxy Store

既然可以直接安裝為什麼要上架到市集?

可以容易搜尋
更高的熟悉與信任度
PWA 打包幾乎沒有成本

Progressive Web App 的未來

小編其實從十年前就開始接觸 Web App，6 年前開始工作後也開始持續關注 PWA 的概念。

這幾年下來，漸漸出現採用 HTML5 的技術電視平台、Firefox OS，不過發展到後期都算是失敗的作品。

近兩年開始看到 Outlook、Telegram 的進步才又有了信心，去年微軟的 Edge 也正式加入 Google 陣營，可以說是為 PWA 的發展又推進了一步。

隨著元件化、模組化的概念發展，小編認為未來前端會趨向不寫程式的狀況，只需要透過模組的組合還有元件的樣式調整就能夠組成前端的 Web App，PWA 也會隨著 Chrome 的進步而越來越強大。

Progressive Web App 從名字可以看出有三個重點

Progressive: 漸進式增強
Web: 網路技術
App: 應用程式

Project Fugu

底下這個網站記錄了 Chrome 團隊即將開發的新功能和潛在功能的完整列表，就讓我們繼續期待 PWA 接下來的發展吧!

https://fugu-tracker.web.app/

FAQ：Progressive Web App 常見問題

Q1：PWA 與傳統網站最大的區別是什麼？

A：最大的區別在於 Service Worker 與 Manifest。傳統網站離開瀏覽器即中斷，而 PWA 可以安裝到主畫面、在離線時運作，並透過推播通知與使用者保持互動，體驗更接近原生 App。

Q2：iOS 是否支援 PWA？

A：支援。雖然 iOS 對 PWA 的支援進度較 Android 慢（例如推播通知在早期版本受限），但目前主要的安裝、快取與基本硬體 API 已能在 iOS 上的 Safari 與其他瀏覽器中運作。

Q3：PWA 安全嗎？

A：非常安全。PWA 要求必須在 HTTPS 環境下執行，這確保了資料傳輸的加密與完整性，同時防止了中間人攻擊（Man-in-the-middle attacks）。

更多相關文章

喜歡這篇文章，請幫忙拍拍手喔 🤣

PWA 教學優點解析與開發全攻略小編的技術開箱：什麼是漸進式增強？為什麼您的網站應該升級成 PWA？