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/
使用介面会被快取且先被载入