你的第一个渐进式网站应用(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 条评论
登录 后参与评论

相关文章

来自专栏kevin-blog

学会如何让你在网络上变的相对匿名

因为最近在弄渗透测试,就担心那天被查水表了,就想起怎么让自己的变的相对匿名呢,这时我想到了tor,“Tor(The Onion Router)是第二代洋葱...

48010
来自专栏FreeBuf

XSS的原理分析与解剖:第三章(技巧篇)

作者 Black-Hole 0×01 前言: 关于前两节url: 第一章:http://www.freebuf.com/articles/web/40520....

22470
来自专栏Eugene's Blog

黑客常用的扫描器盒子分类目录文章标签友情链接联系我们

39790
来自专栏Seebug漏洞平台

披着狼皮的羊——寻找惠普多款打印机中的RCE漏洞

原文:《A Sheep in Wolf’s Clothing – Finding RCE in HP’s Printer Fleet》

42080
来自专栏FreeBuf

披着狼皮的羊:HP打印机远程代码执行漏洞(RCE)是这样被发现的

? 打印机作为组织机构内部不可缺少的资产设备,近年来,随着各种打印固件漏洞百出,其安全性也备受关注,打印机安全与电脑安全同等重要,不容忽视。我们注意到,惠普(...

35150
来自专栏小白课代表

Ansoft maxwell(Ansoft maxwell EM)16 安装教程。

69420
来自专栏码洞

如何优雅的关闭Go Channel【译】

不要在消费端关闭channel,不要在有多个并行的生产者时对channel执行关闭操作。

31340
来自专栏Seebug漏洞平台

披着狼皮的羊——寻找惠普多款打印机中的RCE漏洞

原文:https://foxglovesecurity.com/2017/11/20/a-sheep-in-wolfs-clothing-finding-rce...

13330
来自专栏菩提树下的杨过

老生常谈:利用Membership实现SSO(单点登录)

虽然有一些现成的第三方解决方案比如:OpenID,Passport,SpaceCard等都还不错,但是要么就是收费的(passport),要么就是有点用不习惯(...

22850
来自专栏wujianqinjian的云

腾讯云API弹性公网IP踩坑

由于自己管理的云服务器数量比较多,时不时需要更换IP,在管理台上一下下点击,实在浪费时间,于是就想到了通过API调用的方式,将更换IP一系列动作,全部集成到Py...

4K00

扫码关注云+社区

领取腾讯云代金券