Progressive Web App 開箱簡介 一起看看漸進式增強到底有多強

me
林彥成
2021-09-02 | 2 min.
文章目錄
  1. 1. 什麼是 Progressive Web App?
  2. 2. 怎麼實作一個 PWA?
  3. 3. PWA 有什麼好處,值得我們將站台升級嗎?

Progressive Web App (PWA) 使用當下最新潮的 Web API,Progressive 是用漸進增強的概念來建立跨平台 Web 應用程式。目的是讓體驗接近原生 App。

接下來幾天小編打算來開箱一波 PWA,這個在 2015 年,由兩位大大弗朗西斯貝里曼 (設計師)、亞歷克斯羅素 (Chrome 工程師) 所提出的概念到底在期待和表達些什麼。

什麼是 Progressive Web App?

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

  • Web App: 本身是網頁,所以更容易被搜尋也更容易透過連結被快速取得使用
  • Native App: 能更好的整合硬體、離線資源來提供流暢的體驗

PWA 在不改變使用者習慣的前提下,透過 Responsive Design 來優化不同裝置的體驗,也提供了 Icon 讓使用者不需要透過瀏覽器介面就能執行 Web Apps。

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

怎麼實作一個 PWA?

PWA 提供了一種新的設計哲學,包含像是一些特殊的實作模式、API、配置。也因為這些實作,讓 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 有什麼好處,值得我們將站台升級嗎?

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

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

share