Progressive Web App 架構模式 App Shell Model 概念說明

me
林彥成
2021-09-06 | 2 min.
文章目錄
  1. 1. 什麼是 App Shell?
  2. 2. App Shell 解決了什麼問題
  3. 3. App Shell 實際案例

什麼是 App Shell?

App Shell 乍聽之下是一種技術,實際上是 Web App 架構模式 (Architectural Patterns)。

App Shell Model 這個架構模式目的是讓 Web App 可靠性以及在用戶開啟 App 後能像原生 App 一樣提供立即載入的效果。

對 Progressive Web App 來說,”shell” 可能包含形成基礎操作介面的 HTML、CSS、JavaScript,只要這些資源被快取,就能夠保證下次再啟動 App 時能有立即載入的效果,大大提供了 App 的考靠性和載入效能。

從原生 App 的角度來看,App Shell 就相當於發布到市集的安裝檔,內容只包含了操作介面的骨架,完整內容都是等到需要才會透過網路載入,如下圖紅色框框的部分就是最基本的操作介面 (App Shell),綠色框框才是需要後續載入的資料。

Photo Credit: https://developers.google.com/
App Shell

App Shell 解決了什麼問題

對近年來流行的 single-page applications 來說,大家可能多少已經使用了 App Shell 的概念,簡單來說在架構的設計上將相關資源區分為

  • Cache First: 靜態,基礎操作介面,所以不需要每次更新
  • Network First: 動態,必須要常更新的資料

當我們用漸進式增強的概念來看,整個網站在改版上也是可以漸進式的修改,在新功能的撰寫時就盡可能地去

  • 應用邏輯、顯示內容分開
  • 操作介面和內容分開

最終我們期待整個站台能夠藉由快取相關基礎操作介面,能夠保證再次使用上的可靠性和效能,也能夠提供離線的操作模式,盡可能地減少數據傳輸的浪費。

另外透過骨架先載入,對用戶來說也能增加感知上的效能,近年來越來越多的網站都開始採用這樣的設計。

Photo Credit: https://content.altexsoft.com/
透過 Skeleton Design 增加感知上的效能

App Shell 實際案例

在 Google 的教學文件中,舉了下面這個站台當作例子:

站台連結: https://wiki-offline.jakearchibald.com/wiki/Rick_and_Morty

這個實際應用就很單純暴力,介面也相對單純,所以可以看得出來

  • 重新整理畫面時,相關的導航欄都不會消失
  • 若勾選離線讀取,就連文章內容也會因為讀快取而秒開

當然文章內容除了用 Cache 將 API 快取外,也能夠透過本地端的儲存相關機制進行儲存也是另外一種作法。

Photo Credit: https://developers.google.com/
使用介面會被快取且先被載入


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

share