基於應用外殼的架構

標籤：資源   ima   空閑   沒有   更新   下載   等等   worker   靈活   

什麼是應用外殼(App Shell)

App Shell是應用的使用者介面所需的最基本的 HTML、CSS 和 JavaScript，也是一個用來確保應用有好多效能的組件。它的首次載入將會非常快，載入後立刻被緩衝下來。這意味著應用的外殼不需要每次使用時都被下載，而是只載入需要的資料。

應用外殼的結構分為應用的核心基礎組件和承載資料的 UI。所有的 UI 和基礎組件都使用一個 service worker 緩衝在本地，因此在後續的載入中 Progressive Web App 僅需要載入需要的資料，而不是載入所有的內容。

 

換句話說，應用的殼相當於那些發布到市集的原生應用中打包的代碼。它是讓你的應用能夠啟動並執行核心組件，只是沒有包含資料。

為什麼使用基於應用外殼的結構?

使用基於應用外殼的結構允許你專註於速度，給你的 Progressive Web App 和原生應用相似的屬性：快速的載入和靈活的更新，所有這些都不需要用到市集。

設計應用外殼

第一步是設計核心組件

問問自己：

需要立刻顯示什麼在螢幕上？
我們的應用需要那些關鍵的 UI 組件？
應用外殼需要那些資源？比片，JavaScript，樣式表等等。
我們將要建立一個天氣應用作為我們的第一個 Progressive Web App 。它的核心組件包括：

在設計一個更加複雜的應用時，內容不需要在首次全部載入，可以在之後按需載入，然後緩衝下來供下次使用。比如，我們能夠消極式載入添加城市的對話方塊，直到完成對首屏的渲染且有一些閒置時間。

基於應用外殼的架構