Progressive Web App Checklist 優化檢核清單項目說明

me
林彥成
2021-09-08 | 2 min.
文章目錄
  1. 1. Starts fast, stays fast
  2. 2. 跨瀏覽器支援
  3. 3. 支援不同大小螢幕
    1. 3.1. Responsive Design
    2. 3.2. Content-first Design
  4. 4. 提供頁面離線瀏覽
    1. 4.1. 離線儲存
  5. 5. 支援安裝到手機
  6. 6. 選修優化項目

Starts fast, stays fast

Web App 的效能會直接影響使用者體驗,也會影響到用戶會不會持續使用這個站台,當優化站台時可以多著重在使用者的效能體驗上。

  • 載入時間越長,跳出率越高
  • 可以參考 RAIL user-centric performance model
  • PageSpeed Insights
  • Chrome User Experience Report

跨瀏覽器支援

用戶理論上在安裝前要可以用任何瀏覽器瀏覽 Web App,PWA 其實本質上還是網頁,代表著需要處理跨瀏覽器相容的問題,Jeremy Keith 提出了 Resilient Web Design 的概念,指出:

  • 即使遇到錯誤,App 能夠反應並照常運作
  • 不論任何裝置,核心功能都能以最低需求的方式運行,在支援度高的裝置則增強用戶體驗
    • HTML 提供基礎功能,CSS 和 JS 屬於加強體驗

以一個表單來說

  1. HTML 的 form 加上 submit 是基本寫法
  2. 加入表單欄位驗證、透過 ajax 送出是進階寫法

雖然沒讀完,不過還是推薦有空的大大們有機會可以拜讀 Jeremy Keith 的 Resilient Web Design,去了解怎麼有方法論的去實作跨瀏覽器的支援。

支援不同大小螢幕

讓用戶可以透過任何解析度、各種大小螢幕來瀏覽網頁。

近幾年裝置的大小比例越來越多元,即便在同個裝置也會有不同的解析度,因此確保網站內容要在每個狀態下都可以正常顯示是很重要的。

Responsive Design

行動裝置上由於顯示空間上的受限,所以會特別需要去注意一些功能的設計,目前網路上有很多關於 responsive design 的介紹,也有很多前端工具像是 Bootstrap 預設就提供了這樣的設計。

Content-first Design

另外一種角度是從內容的角度出發去設計整個 App,透過內容去影響排版的響應。

提供頁面離線瀏覽

當用戶處於離線狀態,讓 PWA 仍然能夠有基本的功能,舉例來說 Chrome 在前幾年時就推出了離線小恐龍遊戲,對 PWA 來說,就是能夠提供基礎的功能。

當用戶安裝過後,多少會預期能夠離線使用,所以在網站設計時,PWA 要能夠做到安裝後打開時並不會是一片白。

若是瀏覽到未被快取的頁面:

  • 要適當提供相關提示
  • 提供 skeleton 的設計畫面

實作上,當 service worker 這個網路相關代理小秘書有做好相關設定,原則上就可以快取相關的資源到本機端進行後續利用,像是圖片、影片資源等等。

離線儲存

當決定好哪些功能要支援離線使用時,就會需要將資源儲存在本機端,瀏覽器提供:

  • IndexedDB
  • NoSQL storage system

開發者需要注意的是何時進行資料的撈取及更新,像是處理用戶從離線狀態恢復有網路時的情境轉換。

支援安裝到手機

既然是叫 Web App 那就要讓 App 能夠被安裝,不管是使用上、實際上都能夠更接近 Native App。

  • 啟動到執行流程跟其他 App 相同
  • 能不透過瀏覽器視窗執行
  • 獨立出現在工作管理員

選修優化項目

除了上面幾項必修以外,還有幾項選修可以參考優化

  • 提供無障礙的設計
  • 做好 SEO 讓 PWA 更容易被取用
  • 滑鼠、鍵盤、觸控都要能夠操作,甚至是特殊情境像是手機瀏覽器的下拉更新不應該影響操作
  • 要權限前詢問的方式可優化 (圖片來源: thinkwithgoogle)


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

share