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 对象包含了一些应用关键的信息
头部组件的添加和刷新监听器以及添加城市的对话框的添加和取消监听器
来源: http://www.bubuko.com/infodetail-2471190.html