3.设计你的应用壳

什么是应用壳？

这里指的一个应用的壳是指一个PWA所需的来支撑其用户界面，并且作为一个组件来确保可靠的良好的性能的最低限度的HTML, CSS和JavaScript。他的第一次加载需要非常的快，并且立刻被缓存起来。缓存的意思就是这些壳文件通过网络加载一次，然后就被保存到了本地的设备上。接下来任何时候，用户打开这个应用，这些壳文件将从本地设备的缓存中加载，这样的结果变现就是极其快的启动时间。

应用壳是核心应用的基础设施和UI从数据中分离出来的，所有的UI和基础设施将通过一个service worker被缓存在本地，这样的话，在接下来的加载中，PWA应用秩序获取必要的数据而不是需要去加载所有的数据。

一个service worker是一段跑在你浏览器背后的脚本， 与一个web页面逻辑是分开的，为哪些不需要web页面和用户交互的特性开了一扇窗。

举个其他栗子，应用壳子与当你构建一个native app并将你的代码bundle发布到app store相似。它是使你app落地的核心必要组件，但是很有可能并不包含数据。

为什么使用应用壳架构？

使用应用壳架构允许你可以关注于速度，给与你的PWA应用类似于native apps的特性：持续加载和规律的更新，而且完全不需要一个app商店。

设计应用壳

第一步是将设计分解知道得到其核心组件。

问你自己：

• 什么是需要立刻显示在屏幕上的？
• 什么UI组件对于我们的app是至关重要的？
• 对于应用壳，什么资源是必须的？例如图片，JavaScript，样式等。

我们接下来将创建一个天气app作为我们的第一个PWA应用。关键组件由以下部分组成：

• 有标题和添加刷新按钮的头部；
• 预报卡片的容器；
• 一个预报卡片的模板；
• 一个添加新城市的对话框；
• 一个加载提示器；

当我们设计更加复杂的app时，在初次加载时并不是必须的内容可以延后加载并缓存起来为以后使用。例如，我们可以延迟加载选择新城市的对话框直到我们已经渲染了初次体验的东西并且有一些理想的空隙时间可用。