什麼是 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 解決了什麼問題
對近年來流行的 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/
使用介面會被快取且先被載入
喜歡這篇文章,請幫忙拍拍手喔 🤣