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

相关文章

来自专栏小白课代表

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

1832
来自专栏大魏分享(微信公众号:david-share)

Openshift 3.11的14大新功能详解

聂健是大魏的红帽同事,本文已获得授权转载,欢迎读者阅读他的技术blog:https://www.cnblogs.com/ericnie/

5303
来自专栏李蔚蓬的专栏

VMware Workstation14.1.3 & Ubuntu18.04从安装到实用的填坑之路

本机VMware Workstation环境是上学期安装的,拿的老师给的安装包,版本10.0.1。顺便装了个Ubuntu15.10。

1141
来自专栏码洞

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

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

1904
来自专栏wujianqinjian的云

腾讯云API弹性公网IP踩坑

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

3.6K0
来自专栏散尽浮华

Saltstack自动化操作记录(1)-环境部署

早期运维工作中用过稍微复杂的Puppet,下面介绍下更为简单实用的Saltstack自动化运维的使用。 Saltstack知多少 Saltstack是一种全新的...

23610
来自专栏kevin-blog

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

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

2061
来自专栏Eugene's Blog

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

1909
来自专栏何俊林

Android支付实践(三)之银联支付功能(客户端+服务端)

前言:由于支付宝和微信支付都须要提供这个那个的认证材料,对于个人开发者想尝试,确实有不少麻烦,今天介绍的银联支付,对于个人开发者,可以说是福音了。来自chent...

6558
来自专栏FreeBuf

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

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

1897

扫码关注云+社区