https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
1.介绍
这里将使用PWA技术来构建一个天气web应用，这个app将会：
- 使用以及验证PWA的特性
- 使用API获取最新的天气数据
- 添加城市时，可以提供类似原生应用的交互
我们将会学到
- 怎么使用app shell来设计一个应用
- 怎么使app离线工作
- 怎么储存数据用于离线工作
我们需要什么
- 最新版本的chrome。其实用其他浏览器也可以，只不过我们想用chrome的devTools来体验一些新版本浏览器的特性
- 自己做一个web服务器，或者用web server for chrome（ps：这是一个方便快捷的静态文件服务器，访问chrome://apps/或者书签最左边进入应用，进入web server，选择一个目录，启动服务器即可）
- 下载示例代码
- 一个文本编辑器
- 基础的web知识
2.开始
下载解压以上的实例代码，然后打开静态文件服务器，以实例代码中的work为根目录，然后通过服务器访问里面的index.html（把chrome改为手机模式）。
访问可以看到有个圆形进度条在转。work目录中仅仅是一个骨架，后续会添加剩余的功能
3.app shell
app shell是html、css和js的最小集合，用于为用户提供WAP接口以及保证了良好的性能。它的第一次加载是非常快的而且马上进行缓存。任意时刻用户打开app，app都会从本地缓存中加载shell，这使app打开的速度非常快。
shell的结构将数据从核心的公共结构和UI中分离开来，所有的公共结构和UI都使用service worker进行本地缓存，PWA仅仅请求必须的数据。可以理解为shell就是app的架子（包括UI以及公共的结构），而数据则显示在这个架子上，数据经常会发生变化，所以必要的数据需要都次都去请求获取。用另一种说法解释就是shell就是应用商店中的原生应用，运行的时候再请求数据来显示。
service worker是一个浏览器运行在后台的脚本，用于提供各种特性
为什么要使用app shell结构
这可以使我们专注于速度，提供原生应用的用户体验：瞬间完成加载、实时更新，而且不需要应用商店
设计app shell
首先是把核心组件从设计中拆分出来，需要明白：
- 界面上什么需要马上显示？
- 其他关键的UI组件是什么？
- 什么资源是app shell所需的？如图片、脚本和样式等。
在这个天气app中，关键的组件如下：
- 头部组件：标题、添加和刷新按钮
- 天气预报版块的容器组件
- 天气预报版块的模板
- 一个用于添加城市的对话框
- 用于显示loading的指示器
4.实现app shell
有很多种方式可以初始化一个项目，我们推荐使用web starker kit，因为在这个例子我们希望尽可能的简单，所以已经提供好了必备的资源。
为shell创建html
index.html已经在work目录中了，而且样式也已经写好了
检查关键的JS代码
以上界面已经准备好了。在scripts/app.js中可以发现：
app对象包含了一些应用关键的信息
头部组件的添加和刷新监听器以及添加城市的对话框的添加和取消监听器
