4.实现你的应用壳
任何项目都有很多方法开始，我们通常建议使用Web Starter Kit。但是，在这个栗子中，为了保持我们的项目足够简单并且专注于PWA应用，我们将提供所有的你将需要的资源。
学习更多关于Web Starter Kit
创建应用壳的HTML
现在我们将添加我们在前一节（设计你的应用壳）讨论过的核心组件。
记住，核心组件是由如下部分组成：
- 有标题和添加刷新按钮的头部；
- 预报卡片的容器；
- 一个预报卡片的模板；
- 一个添加新城市的对话框；
- 一个加载提示器；
index.html这个文件已经存在于你的work文件夹下面，它长得像下面这个样子（下面的代码是实际内容的一部分，不要复制这些代码到你的文件中去）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather PWA</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>
<body>
<header class="header">
<h1 class="header__title">Weather PWA</h1>
<button id="butRefresh" class="headerButton"></button>
<button id="butAdd" class="headerButton"></button>
</header>
<main class="main">
<div class="card cardTemplate weather-forecast" hidden>
. . .
</div>
</main>
<div class="dialog-container">
. . .
</div>
<div class="loader">
<svg viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>
<!-- Insert link to app.js here -->
</body>
</html>
注意，加载提示器默认可见。这是为了确保在页面加载时用户能够立刻看到加载提示器，给他们一个明确的提示，内容正在加载中。
为了节省时间，我们已经创建好了样式给你使用。
我们已经提供了html和样式给你，来节省你一点时间并确保你能够在一个好的基础上开始。在接下来的内容中，你将有机会写你自己的代码。
查看关键的JavaScript代码
现在我们的大部分UI都准备好了，是时候让我们的代码跑起来了。像除app壳以外的其余部分，你需要对哪些代码是关键体验所必须的部分，哪些是可以后续加载的保持清醒。
你的work目录已经准备好了，它包含app代码（scripts/app.js）, 在这个文件中，年级将找到：
- 一个app对象包含了一些应用必须的关键信息；
- 在头部（添加/刷新）和在添加城市对话框中的（添加/取消）所有按钮的事件监听器；
- 一个添加或者更新预报卡片的方法（app.updagteForecastCard）;
- 一个从Firebase公共天气API获取最新天气预报数据的方法(app.getForecast);
- 一个通过调用app.getForecast方法来更新当前卡片数据的方法（app.updateForecasts）;
- 你可以用于快速测试渲染过程的伪造数据（initialWeatherForecast）;
测试一下
现在你已经得到了主要的HTML, styles和JavaScript，是时候来测试下这个应用了。
为了观察伪造的数据是如何被渲染的，请将你的index.html文件的底部的如下的代码解除注释：
<!--<script src="scripts/app.js" async></script>-->
接下来，将你app.js文件中的底部的如下代码解除注释：
// app.updateForecastCard(initialWeatherForecast);
然后刷新你的应用。结果将是加载提示器消失，呈现完美格式化好的预报卡片（虽然是假的数据，从日期你可以判断得出），如下：
一旦你试过并且验证它能够如预期那样工作，你可以移除调用伪造数据的app.updateForecastCard方法。我们只需要确保一些如预期一样。