1、PWA( Progressive Web App)组成技术
- Service Worker
- Promise
- Fetch
- Cache API
- Notification API
(1) Service Worker（类似web worker，桌面浏览器支持度极高）
服务工作线程
- 常驻内存运行
- 代理网络请求
- 依赖HTTPS
(2) Promise
“承诺”控制流
- 优化回调地狱
- async/await语法同步化
- service worker的API风格
Promise静态方法
Promise.resolve(1) // 把入参转换成已完成的Promise，相当于new Promise(resolve => resolve(1))
Promise.reject(error) // 把入参转化成拒绝的Promise，相当于new Promise((resolve, reject) => reject(error))
Promise.all('abc') // 参数不必是数组，是可迭代对象即可。
Promise.race('abc')
Promise 链式控制流有众多callback函数，为线性排列，为避免编写callback函数
可用async await把链式Promise写出同步语句的样子
(3) fetch
网络请求
- 比XMLHttpRequest更简洁
- Promise风格
- 依旧存在不足（不支持Progressive监听报告、不支持abort中断）
fetch缺点：不能提供上传进度、不能控制跳出时间、不能主动中断请求，在Service Worker够用，页面上下文推荐用axios
(4) cache API
支持资源的缓存系统
- 缓存资源（css/scripts/image）
- 依赖Service Worker代理网络请求 -支持离线程序运行
此api不仅用于Service Worker，还可用于页面上下文( 比如onload之后写缓存 ) 每次缓存变化，修改cache名字，重新抓取资源写入新的缓存，（并清理之前无用缓存，浏览器空间有限，在activate中进行清理） 此api 90%都是读、写和更新缓存
(5) Notification API
消息推送
- 依赖用户授权
- 适合在Service Worker中推送
Notification.permission // 当前页面已经获取到的授权
Notification.requestPermission().then(permission => console.log(permission)) // 弹出授权请求，promise中可以得到用户授权后的权限描述
// 页面上下文弹出通知
new Notification('Hello notification', {body: 'This is from console'})
// Service Worker弹出通知(registration就是页面上下文注册serviceWorker成功后得到的对象)
self.registration.showNotification('Hello')
2、在react项目中开启PWA
Workbox赋予项目程序离线渲染能力，Create-react-app已经配置好了workbox
src/serviceWorker.js，可在src/index.js中配置
build/precache-manifestxxx.js 为静态资源文件清单，被service-worker.js所引用
build/manifest.json 定义原信息
