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

4. 实现你的App Shell

任何项目都可以以多种方式开始,我们通常建议使用Web Starter Kit。但是,在这个案例中,为了让我们的项目尽可能简单,并专注于渐进式网站应用,我们为您提供您需要的所有资源。

更多关注Web Starter Kit

为App Shell创建HTML

现在我们将要添加在建立你的App Shell章节中讨论的核心组件。

请记住,关键组件包括:

  • 带有一个title和add/refresh按钮的头部
  • 天气预报卡片容器
  • 一个天气预报卡片模版
  • 一个添加新城市的对话框
  • 一个加载指示器

index.html 文件在你的 work 目录中已经准备就绪,如下所示 (这是部分代码,不要复制代码到你的文件中):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather PWA</title>
  <link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>
<body>
  <header class="header"><!--头部-->
    <h1 class="header__title">Weather PWA</h1><!--标题-->
    <button id="butRefresh" class="headerButton"></button><!--刷新按钮-->
    <button id="butAdd" class="headerButton"></button><!--添加按钮-->
  </header>

  <main class="main">
    <div class="card cardTemplate weather-forecast" hidden><!--默认隐藏-->
    . . .
    </div>
  </main>

  <div class="dialog-container"><!--对话框容器-->
  . . .
  </div>

  <div class="loader"><!--载入指示器-->
    <svg viewBox="0 0 32 32" width="32" height="32">
      <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
    </svg>
  </div>

  <!-- Insert link to app.js here -->
</body>
</html>

请注意,加载器(菊花)默认是可见的。这可以确保用户在页面加载时立刻看到加载器,从而明确指示内容正在加载。

为了节省时间,我们也已经创建了样式表供您使用。

我们给了你的标记和样式,帮助你节省一些时间,并确保你在一个坚实的基础上开始。在下一节中,您将有机会编写你自己的代码。

查看关键的JavaScript代码

现在我们已经准备好了大部分的用户界面,是时候开始连接代码让一切的工作起来。像其他应用app shell一样,请注意哪些代码是作为关键体验一部分所必需的,以及稍后会加载哪些代码。

你的work目录也已准备好,包含app的代码 (scripts/app.js),在这里你可以找到:

  • 一个 app 对象,包含了app所必须的一些关键信息。
  • 时间监听器用于头部中的所有按钮 (add/refresh) 以及添加城市对话框中的 (add/cancel).
  • 一个添加和更新天气预报卡的方法 (app.updateForecastCard).
  • 一个从Firebase Public Weather API (app.getForecast)获取最新天气预报数据的方法.
  • 一种迭代当前卡片的方法并且调用 app.getForecast 去或者最新的天气预报数据 (app.updateForecasts).
  • 一些假数据 (initialWeatherForecast) 你可以用来快速测试相关事物是如何渲染的。

测试

现在你已经有了核心的HTML,样式和JavaScript,现在是测试这个应用程序的时候了。

要查看假天气数据是如何呈现的,请取消 index.html 文件底部的代码注释:

<!--<script src="scripts/app.js" async></script>-->

接着,取消下面所示的app.js 文件底部的代码注视:

// app.updateForecastCard(initialWeatherForecast);

重新载入你的. 结果还不错 (虽然是假数据),天气预报卡带有不可用的spinner, 像下面这样:

TRY IT

一旦您尝试过并验证其正常工作,您可以再次使用伪数据移除对 app.updateForecastCard 进行调用。我们只需要它确保一切按预期工作。

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序之美

第九节 OAuth2

当然具体如何实现,用什么方式实现其实是无所谓,因为只要遵循上面定义的规则就可以。已经有很多造好的轮子了,我们拿过来用就好了,如果想要更深入的研究也可以自己尝试去...

582
来自专栏Java架构

干货 | 京东购物车的Java架构实现及原理!

4)用户登陆了用户名密码,添加商品, 关闭浏览器 外地老家打开浏览器  登陆用户名和密码

1241
来自专栏hotqin888的专栏

beego微信小程序登录、确权、解密

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1031
来自专栏walterlv - 吕毅的博客

如何组织一个同时面向 UWP/WPF/.Net Core 控制台的 C# 项目解决方案

2017-10-21 03:20

321
来自专栏take time, save time

三十天学不会TCP,UDP/IP网络编程 - UDP的实践--DHCP

在经历了一顿忙碌加出去玩了玩之后,我又开始重新更新了~这是最新的一篇~完整版可以去gitbook(https://www.gitbook.com/@rogerz...

35012
来自专栏喵了个咪的博客空间

PhalGo-介绍

PhalGo-介绍 phalgo是一个Go语言的一体化开发框架,主要用于API开发应为使用ECHO框架作为http服务web程序一样可以使用,牛顿曾经说过"如果...

2906
来自专栏Golang语言社区

localStorage的黑科技-js和css缓存机制

一、发现黑科技的起因  今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上。然后习惯性地打开控制台,看看源码,想了解下最近微信用了什...

34012
来自专栏V站

WordPress丨如何利用.htaccess文件进行缓存?

将以上代码一字不漏的扔进website中的 .htaccess文件,规律是以秒计算,自行修改!

1334
来自专栏吴伟祥

swagger-ui教程-构建api接口文档工具

之前写过关于app后端开发的一系列文章,那是我第一次做app后端开发,存在很多不足,本想好好修改一下,想想还是重新写吧,这样子也能让我博客文章看起来多一点嘛,万...

601
来自专栏我和PYTHON有个约会

Tornado剑谱02——安装配置

随着Python技术的益发流行,在web开发领域也逐渐凸显出来python强大的开发优势和使用场景,各种基于python的web框架开始流行在各种类型的项目中。

601

扫码关注云+社区