从快速的首次加载开始

Posted 2020-08-28

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 中的天气数据。
添加一个新城市确保会展示两个卡片。
刷新浏览器并验证应用是否加载了天气预报并展示了最新的信息。