1. 入门介绍

PWA(渐进式的web app)的体验是最好的web和最好的app的体验结合。PWA应用对于那些初次在浏览器访问的用户来说非常有用,不需要任何安装操作。而且,随着用户对某个应用产生一定粘性的时候,它会变得越来越强大。体现在,它加载很快即便是在在很差的网络条件下,推送相应的通知消息,在主屏幕上拥有图标并且以最高级别加载像native app那样的全屏体验。

那什么是PWA呢?

一个PWA应用拥有如下特性:

  • 渐进式——服务于每个用户,不管你使用什么浏览器,因为它的核心构建原则就是渐进增强的;
  • 响应性——适用于任何形式的平台:pc端,手机端,笔记本,或者管他接下来还有哪些平台,都ok;
  • 可不依赖网络 - 由于service workers的加成,使得PWA可以无网络或者网络状况很差的情况下使用;
  • 类app——感觉起来就是一个app, 因为app壳模式将应用的必备功能和应用的内容剥离开来;
  • 持续更新——感谢 service worker的更新方法,让pwa应用能够始终保持最新状态;
  • 安全——通过HTTPS提供服务,防止监听并保证内容不被篡改;
  • 易于获取——感谢 W3C manifest和service worker的注册作用域使得pwa应用以“application”的形式标记,使得搜索引擎能够找到它;
  • re-engageable——通过消息推送能力使得re-engageable更容易;
  • 可安装——允许用户将他们找到的觉得很有用的PWA应用添加到主屏幕,而且不必通过 app store来实现安装;
  • 可链接性——可以非常简单的通过URL分享应用,并且不需要复杂的安装;

此处的code实验室将带你来一起创建一个你自己的PWA应用, 包括设计考量和实现细节,来保障你的应用满足以上提到的一个PWA应用的关键原则。

你将构建

在这个code实验室,你将使用PWA技术构建一个关于天气的web app。你的APP将:

  • 使用和实现以上的PWA应用的原则;
  • 使用实时的天气数据;
  • 提供类app的交互,来使得用户添加各种城市;

你将学习

  • 如何使用“app shell”方法来设计和构建一个PWA;
  • 如何让你的PWA在无网络的情况下工作;
  • 如何存储数据为后续的无网络状况使用;

你将需要

  • 最近的谷歌浏览器版本。注意,PWA应用在其他浏览器同样工作,但是我们将使用一些谷歌浏览器的devTools的特性,来在浏览器层面更好的理解发生了什么;
  • Web Server for Chrome谷歌浏览器应用插件,或者你自己选择的web服务器;
  • code样板;
  • 文本编辑器;
  • 关于HTML, CSS, JavaScript和谷歌DevTools的基本知识;

这个code实验室专注于PWA,所以非相关的概念和代码块被注释掉了,以便你进行复制粘贴。

results matching ""

    No results matching ""