Progressive Web Apps 应该能够快速启动并且立即可用。目前，我们的天气应用能够快速启动，但是还不能使用，因为还没有数据。我们能够发起一个 AJAX 请求来获取数据，但是额外的请求会让初次加载时间变长。取而代之的方法是，在初次加载时提供真实的数据。
插入天气预报信息
在本实例中，我们将会静态地插入天气预报信息，但是在一个投入生产环境的应用中，最新的天气预报数据会由服务器根据用户的 IP 位置信息插入。
这代码已经包括了所需的资料，那就是我们在前个步骤所用的 initialWeatherForecast。
区分首次运行
但我们如何知道什么时候该展示这些信息，那些数据需要存入缓存供下次使用？当用户下次使用的时候，他们所在城市可能已经发生了变动，所以我们需要加载目前所在城市的信息，而不是之前的城市。
用户首选项（比如用户订阅的城市列表），这类数据应该使用 IndexedDB 或者其他快速的存储方式存放在本地。 为了尽可能简化，这里我们使用 localStorage 进行存储，在生产环境下这并不是理想的选择，因为它是阻塞型同步的存储机制，在某些设备上可能很缓慢。
首先，让我们添加用来存储用户首选项的代码。从代码中寻找以下的TODO注解：
// TODO add saveSelectedCities function here
然后将以下的代码粘贴在TODO注解的下一行。
// 将城市数据存入 localStorage.
app.saveSelectedCities = function() {
var selectedCities = JSON.stringify(app.selectedCities);
localStorage.selectedCities = selectedCities;
};
接下来，添加一些启动代码来检查用户是否已经订阅了某些城市，并渲染它们，或者使用插入的天气数据来渲染。从代码中寻找以下的TODO注解：
// TODO add startup code here
然后将以下的代码粘贴在TODO注解的下一行。
/****************************************************************************
*
* 用来启动应用的代码
*
* 注意: 为了简化入门指南, 我们使用了 localStorage。
* localStorage 是一个同步的 API，有严重的性能问题。它不应该被用于生产环节的应用中！
* 应该考虑使用, IDB (https://www.npmjs.com/package/idb) 或者
* SimpleDB (https://gist.github.com/inexorabletash/c8069c042b734519680c)
*
****************************************************************************/
app.selectedCities = localStorage.selectedCities;
if (app.selectedCities) {
app.selectedCities = JSON.parse(app.selectedCities);
app.selectedCities.forEach(function(city) {
app.getForecast(city.key, city.label);
});
} else {
app.updateForecastCard(initialWeatherForecast);
app.selectedCities = [
{key: initialWeatherForecast.key, label: initialWeatherForecast.label}
];
app.saveSelectedCities();
}
储存已被选择的城市
现在，你需要修改"add city"按钮的功能。这将会把已被选择的城市储存进local storage。
更新butAddCity中的代码:
document.getElementById(‘butAddCity‘).addEventListener(‘click‘, function() {
// Add the newly selected city
var select = document.getElementById(‘selectCityToAdd‘);
var selected = select.options[select.selectedIndex];
var key = selected.value;
var label = selected.textContent;
if (!app.selectedCities) {
app.selectedCities = [];
}
app.getForecast(key, label);
app.selectedCities.push({key: key, label: label});
app.saveSelectedCities();
app.toggleAddDialog(false);
});
测试
在首次允许时，你的应用应该立刻向用户展示 initialWeatherForecast 中的天气数据。
添加一个新城市确保会展示两个卡片。
刷新浏览器并验证应用是否加载了天气预报并展示了最新的信息。