iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

前端三分鐘 X Progressive Web App 30 天製造解密系列 第 12

Progressive Web App 架構模式: App Shell Model 概念說明 (12)

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


上一篇
Progressive Web App 離線後備頁面: 玩過 Chrome 小恐龍遊戲了嗎 (11)
下一篇
Progressive Web App 用戶端儲存簡介 (13)
系列文
前端三分鐘 X Progressive Web App 30 天製造解密30

尚未有邦友留言

立即登入留言