你的第一个渐进式网站应用(5)

5. 从一个快速的首次加载开始

渐进式网站应用会很快启动并马上可用。在目前的状态中(step-04),我们的天气app启动很快,但是不可用。因为还木有数据。 我们要使用一个AJAX请求去获取数据,但是这会导致一个额外的请求,并使初始加载时间更长。但仍然要在第一次加载时提供真实的数据。

注入天气预报数据

对于这个代码实验室,我们将模拟服务器将天气预报直接注入到JavaScript中,但在生产应用程序的过程中,最新的天气预报数据将由服务器根据用户的IP地址地理位置注入。

代码中已经包含数据并且我们将要进行注入,就是这个 initialWeatherForecast 方法,我们开始使用下一个步骤。

区别对待第一个运行

但是,我们如何知道什么时候显示这些信息,当天气应用程序从缓存中提取时,这些信息可能与未来的载入无关?当用户在后续访问中加载应用程序时,他们可能已经改变了城市,所以我们需要加载这些城市的信息,而不一定是他们的第一个次查找的那个城市。

用户首选项(如用户已订阅的城市列表)应使用IndexedDB或其他快速存储机制进行本地存储。为了尽可能简化这个代码实验,我们使用了 localStorage, 这对生产应用程序来说并不理想,因为它是一个阻塞的同步存储机制,在某些设备上可能非常慢。

额外的提示: 利用idb替换localStorage 来实现, 确保localForage做为idb的一个简单包装。

首先,我们添加保存用户设置的所需要的代码在你的代码中找到下面所示的 TODO 注视。

  // TODO add saveSelectedCities function here

在注视下面添加下列代码。

  // Save list of cities to localStorage.
  app.saveSelectedCities = function() {
    var selectedCities = JSON.stringify(app.selectedCities);
    localStorage.selectedCities = selectedCities;
  };

接下来,我们添加启动代码来检查用户是否有任何已保存了城市并渲染它们,或使用注入的数据。找到以下注释:

  // TODO add startup code here

在注视下面添加下列代码:

/************************************************************************
   *
   * Code required to start the app
   *
   * NOTE: To simplify this codelab, we've used localStorage.
   *   localStorage is a synchronous API and has serious performance
   *   implications. It should not be used in production applications!
   *   Instead, check out IDB (https://www.npmjs.com/package/idb) or
   *   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 {
    /* The user is using the app for the first time, or the user has not
     * saved any cities, so show the user some fake data. A real app in this
     * scenario could guess the user's location via IP lookup and then inject
     * that data into the page.
     */
     
    app.updateForecastCard(initialWeatherForecast);
    app.selectedCities = [
      {key: initialWeatherForecast.key, label: initialWeatherForecast.label}
    ];
    app.saveSelectedCities();
  }

启动代码检查是否有任何城市保存在本地存储。如果是,则解析本地存储数据,然后为每个保存的城市显示天气预报卡。如果否,则启动代码只是使用虚假预测数据,并将其保存为默认城市。

保存被选择的城市

最后,您需要修改“添加城市”按钮程序,将选定的城市保存到本地存储

更新你的 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);
  });

新增了 app.selectedCities 的初始化,如果不存在,就调用 app.selectedCities.push()app.saveSelectedCities()方法

测试一下

  • 当第一次运行,你的app会通过 initialWeatherForecast立即显示用户的天气预报
  • 添加一个新的城市 (点击右上角加号图标) 并确认,就显示两个卡片了。
  • 刷新浏览器并确认app加载这了两个天气预报且展示最新信息。

TRY IT

原文链接:https://codelabs.developers.google.com/codelabs/your-first-pwapp/#4

原文作者:codelabs.developers.google.com

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

Javascript面向对象编程(三):非构造函数的继承

这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。 今天是最后一个部分,介绍不使用构造函数实现"继承"。 一、什么是"非构造函数"的继承...

2645
来自专栏码洞

全栈虚拟机GraalVM初体验

近日Oracle开源了一个实验性的产品GraalVM,官方称之为Universal GraalVM。它打通了不同语言之间的鸿沟,让我们可以进行混合式多语言编程。...

742
来自专栏Rainbond开源「容器云平台」

搬运向 | 浅析serverless架构与实践

2595
来自专栏Java学习网

如何编写出优秀软件

如何编写出优秀软件   软件必须是自由的   优秀软件是自由软件。我将避免使用“开源”,因为它根本没有包含社会层面,它和技术本身同等重要。你可以从这里了解更多...

2025
来自专栏玩转前端

Android自动化测试+性能监控预警系统搭建

我们把范围略微缩小点,放在移动端这个环境上,自动化测试是指在预设条件、路径下运行app,运行之后给出一个评估结果,通常会生成一份测试报告,有哪些用例通过,有哪些...

2094
来自专栏高性能服务器开发

强大的搜索开源框架Elastic Search介绍

近期工作需要,需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容,经调研我选择了Elastic Search。

1151
来自专栏极客生活

数据分析python技能之es数据提取

Elasticsearch 公司的产品栈非常全面,打通数据采集,传递,存储,展示,而且部署简单快速,半天时间就可以搭建一套完整的POC出来。

733
来自专栏PHP技术

PHP 的前世今生

翻译自 《Modern PHP》by Josh Lockhart PHP 现在正在经历着一场自己在编程语言中的文艺复兴。通过增加一系列新的特性(比如 name...

3256
来自专栏Java大联盟

微信刷卡支付API详解

924
来自专栏iOS Developer

Bison详解连连支付集成

1044

扫码关注云+社区