[TOC]

Skeleton 和 App Shell 模型

App Shell 模型是架构 PWA 的一种方式，它能够可靠且即时地让站点快速加载到用户屏幕上，获得与本地 APP 相似的体验。

img

关于 App Shell 本身的概念和优势可以参考 PWA 文档中的这篇文章，这里不作展开。

如果您阅读过为 Vue 项目添加骨架屏一文，可能已经了解了骨架屏 (Skeleton)的作用其实和 App Shell 非常类似，解决的都是在页面加载时尽量缩短白屏，给用户提供更好的页面切换体验。

在实际实现的过程中，Lavas根据渲染模式 (SPA 和 SSR) 的不同，分别使用两种不同的解决方案。在 SPA 模式下使用 Skeleton，在 SSR 模式下使用 App Shell。下面将分别讲述它们的配置和使用方式。

SPA 模式下的 Skeleton

如果您关注过构建后的 index.html 页面，应该发现 Skeleton 的内容会被直接注入到页面中。换言之，在页面的 HTML 结构中就已经包含了 Skeleton，后续渲染成功后再进行替换。如果配合 Service Worker，则可以将 HTML 文件缓存起来，在页面切换时快速展现，达成目标。

因此我们的思路是：把 index.html 添加到 Service Worker 的预缓存列表中，并且告知 Service Worker在请求某个页面时，从缓存中把 HTML 返回出来供前端直接展现。后续的加载和替换 Skeleton 由 js 继续走正常流程完成，就无需我们额外关心了。

为了实现思路，我们需要进行的操作有两个步骤：

  1. Skeleton 本身的编写
  2. 配置 Service Worker，添加预缓存文件列表

编写 Skeleton

Skeleton 的位置在 /core/Skeleton.vue。

Skeleton.vue 按照普通 Vue 页面组件的开发方式进行开发即可。一般情况在