什麼是 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/
使用介面會被快取且先被載入