應用程式的shell是為漸進式網站應用的使用者界面提供所需的最小HTML，CSS和JavaScript能力，并且是確定可靠的良好性能的元件之一。它的第一次加載會非常快，并且立即緩存。 “緩存”意味着shell檔案通過網絡加載一次，然後儲存到本地裝置。每當使用者打開應用程式時，shell檔案都會從本地裝置的緩存中加載，進而使得啟動速度非常快。
App shell體系結構将核心應用程式基礎結構、UI與資料分離開。所有的UI和基礎架構都利用service worker在本地進行緩存，以便在後續的加載中漸進式網站應用隻需要檢索必要的資料，而無需加載所有内容。
service worker是一個在浏覽器背景運作的腳本，與網頁是分割開的，這個特性的開啟無需依賴一個網頁或使用者的互動。
換句話說，app shell類似于建構native app時釋出到應用程式商店的代碼包。它是你的應用程式的核心元件，但可能不包含資料。
使用app shell建構允許你去聚焦在速度上, 給予你的漸進式網站應用類似naitve apps的屬性: 即刻加載和日常更新，而完全不需要依賴一個app store。
第一步分解出核心的元件進行設計。
扪心自問:
什麼需要立即在螢幕上顯示？
還有其他什麼UI元件是我們app必須的？
app shell需要什麼資源支援？比如圖檔，JavaScript，樣式等等。
我們将建立一個天氣應用程式作為我們的第一個漸進式網站應用。關鍵元件包括：
帶有一個title和add/refresh按鈕的頭部
天氣預報卡片容器
一個天氣預報卡片模版
一個添加新城市的對話框
一個加載訓示器
在設計一個更複雜的應用程式時，内容無需在初始化時候加載，可以稍後請求，然後将其緩存以供将來使用。例如，我們可以在渲染出第一次運作體驗并且擁有一些空閑周期之後延遲加載“新城市”對話框。