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

相关文章

来自专栏IT派

厉害!黑客怎样用谷歌查找信息?

IT派 - {技术青年圈} 持续关注互联网、区块链、人工智能领域 黑客去入侵一个网站的时候往往需要搜集它的很多信息,这其中包括利用网站漏洞,社工,还有就是用...

3436
来自专栏区块链入门

第十课 Solidity语言编辑器REMIX指导大全

【本文目标】 本文翻译和实践Solidity语言编辑器REMIX官网帮助文档,但并不拘泥于逐字翻译,而时根据实践用中文语言讲透编辑器相关功能。 【前置条件】...

1354
来自专栏阿北的知识分享

浅谈csrf攻击以及yii2对其的防范措施

今天北哥就给大家普及下csrf是啥?如果你已经知道了可以直接拉文章到底部点个赞。:smile:

1586
来自专栏coding

swoole框架-swoft初体验swoft环境搭建体验http服务体验ws服务初体验

没有swoole之前,php一直被"誉“为世界上最好的语言。swoole横空出世后,php就成了宇宙最好的语言了...

1011
来自专栏小白课代表

软件分享 | AirParrot 屏幕镜像工具安装教程

AirParrot是一个通过AirPlay把PC端的屏幕镜像无线投射到电视机上的实用工具。这款软件当然不仅仅具有屏幕的镜像功能,还有很多辅助功能,能够让你非常方...

1561
来自专栏一“技”之长

iOS9系列专题四——APP传输安全 原

        随着ios9的推出和Xcode的升级,apple将默认开发者使用https的传输方式,相比http的传输协议,这无疑会增加一些安全性,对于开发者...

704
来自专栏繁花云

[实例]利用php+mysql完成shell脚本的授权验证

作者最近这几天写了一个shell脚本准备进行出售,由于单独出售利润不大,决定将脚本按照IP进行授权,出售授权,这样可以增加利润。

960
来自专栏黑白安全

渗透指定站点笔记

首先介绍下什么样站点可以入侵:我认为必须是动态的网站 如ASP、PHP、 JSP等代码编写的站点 如果是静态的(.htm或html),一般是不会成功的。

1024
来自专栏娱乐心理测试

使用Charles抓包并篡改返回数据

4579
来自专栏编程微刊

layer弹框在实际项目中的一些应用

1575

扫码关注云+社区