Progressive Web App (PWA) 使用當下最新潮的 Web API，Progressive 是用漸進增強的概念來建立跨平台 Web 應用程式。

目的是讓體驗、效能接近原生 App

接下來的幾篇文章，小編會帶著大家一起開箱一波 PWA，這個在 2015 年，由兩位大大弗朗西斯貝里曼 (設計師)、亞歷克斯羅素 (Chrome 工程師) 所提出的概念到底在期待和表達些什麼，看看漸進式增強到底有多強。

什麼是 Progressive Web App?

Progressive Web App (PWA) 透過幾種特殊瀏覽器技術的組合讓 Web Apps 除了本身的優勢外也能夠擁有 native apps 的一些優點，簡單來說將網站優化成 PWA 其實只會讓網站更好更加分。

• Native App:
  • 完整整合硬體效能、離線資源來提供流暢的體驗
  • 取得較不方便
• 網頁:
  • 相對原生 App 無法完整使用硬體功能，但能運作在較低端的設備上
  • 唯一可以觸及全平台的管道，容易被搜尋和取得
• Progressive Web App:
  • 本身是網頁也容易被搜尋並透過連結被安裝使用
  • 運用最新的網頁技術更深度的整合硬體資源，功能只會越來越豐富

那 PWA 可靠嗎? 這個問題其實是說 Service Worker 在各瀏覽器上的運作穩定了嗎? 隨著瀏覽器的技術進步，這個答案是肯定的。

舉三個曾採用了 PWA 的大公司，可以發現 PWA 會以 Lite 的命名來做區分，目的其實就是增加 App 的普及性。

• IG Lite
• Twitter Lite
• Telegram Z

Progressive Web App 在商業上的幫助

對商業的網站來說，PWA 在不改變使用者習慣的前提下:

1. 透過 Responsive Design 來優化不同裝置的體驗
2. 提供了 Icon 讓使用者不需要透過瀏覽器介面就能執行 Web Apps

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

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

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

怎麼實作一個 PWA?

PWA 提供了一種新的設計哲學，包含像是一些特殊的實作模式、API、配置。

• 推薦安裝提示
• Manifest: PWA 配置檔
• Service Worker 讓網頁支援離線快取及推播

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

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

• 可以離線運作 (Works Offline)
  • 用戶端儲存快取與離線後備頁面
• 可以被安裝 (Installable)
• 可以收推播 (Push Notifications)

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

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

PWA 漸進式增強

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

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

• 通知數字 (Badging API)
• 位置存取 (Geo Location API)
• NFC Reader
• 喚醒鎖維持螢幕長亮
• 分享內容 (Web Share API)
• 存取通訊錄 (Contact Picker API)
• 定期背景同步 (Periodic Background Sync API)
• 裝置閒置偵測 (Idle Detection API)
• 顯示通知 (Notification API)
• 程式快速啟動選單 (App Shortcut)

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: 應用程式

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

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