上一章中，我们对预缓存进行了讲解，基于该机制，当一个页面被访问时，脚本、样式、图片等资源可直接从缓存中获取，这在很大程度上加速了页面的渲染。但如果仅止步于此，那么当用户处于电梯、高铁、地铁等网络极其恶劣的环境下，用户可能看到的依旧是空白页（如下所示）：
- 这种无任何反馈的空白页可以说是用户体验的终极杀手，或许就在此刻，用户关闭了站点，转而投向了竞争对手的怀抱……
- 那么如何避免此种悲剧的发生呢？如果仔细观察页面构造，我们会发现页面中变化的始终是部分内容，比如：
上图所展示的页面主要由 Header、列表及添加按钮三部分组成，其中除了列表，其余部分的内容均是不变的。基于此并结合预缓存，我们可以通过以下方式来解决空白页的问题：
- 通过缓存获取 Header、添加按钮等静态信息。
- 通过网络获取列表等动态信息。
- 将前两步得到的信息拼装成完整的 HTML 返回给浏览器进行渲染。
以上步骤所展示的解决方案正是本章将要讲解的应用 Shell 架构，在本章的剩余部分，我们将通过以下几个方面对该架构的实施进行详细说明：
Shell文件生成。fetch事件。- 服务端实现。
# Shell 文件生成
运行示例中的
yarn build命令，public/shell目录下会生成以下文件：
├── home_top.html
├── home_bottom.html
├── ....
@前端进阶之旅: 代码已经复制到剪贴板
打开 home_top.html 与 home_bottom.html，我们会发现这两个文件分别为一个完整 HTML 文档的一部分：
home_top.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, user-scalable=no">
<link rel="manifest" href="/manifest.json">
<title>PWA 博文</title>
<link href="/global.4735f484d20bd330417c.css" rel="stylesheet"><link href="/home.5704e93d911a9fcdaf14.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="title">PWA 博文</div>
<div class="action action-install-app">安装应用</
