- PWA 是什么？
- PWA 解决什么问题 ？
- 为什么学习 PWA？
Progressive Web App （渐进式网络应用。从名字上就能看出来，业务的部署并非一蹴而就，可以循序渐进的实现它。每次只实现一部分。这个特性既降低了业务的部署成本，也适应了浏览器厂商的更新节奏。更容易被广大开发者接收。）
PWA组成技术
-
Service Worker （服务工作进程）
很多人知道Web Worker。一种独立于浏览器主线程的环境。一般用来执行较复杂的计算操作。不会阻塞页面渲染。与主线程通过postMessage通信。Service Worker与Web Worker类似。但拥有增多的有用特性。比如，他可以独立于页面，而常驻内存运行。比如可以代理网络请求。并且只在HTTPS环境下运行。可以说Service Worker是PWA中最重要的API。 可以理解Service Worker是整个PWA系统的大脑。没有了大脑的思维能力，其他硬件再强大也是一无是处。
-
Promise
Promise优雅的解决了js编程中的回调地狱问题。配合async/await语法，可以让异步编程更简洁，高效。即使浏览器不支持Promise，业界也存在诸多polyfill可替代模块。Service Worker中存在大量Promise风格的API。
-
fetch
之前我们在浏览器中发起异步请求都是通过XMLHttpRequst对象。不仅发请求麻烦，还要解析返回值。直到fetch的出现。fetch的API非常简洁。并且是Promise风格。对于还不支持fetch的浏览器，也有大量的第三方模块供选择。但是fetch并非完全能替代XMLHttpRequest。
1 fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理。
2 fetch默认不会带cookie，需要添加配置。
3 fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能 阻止请求过程继续在后台运行，造成了量的浪费。
4 fetch没有办法原生监测请求的进度，而XHR可以。
-
cache API
以前在浏览器端，我们往cookie，localstorage，indexDB里面写入数据。但是都是属于内存数据。对于资源，比如js，css，图片。我们没有办法操作。有了cache API 就不同了。可以直接拦截资源请求。并返回cache 中的数据。这个过程对浏览器是透明的。这允许我们web 页面在没有网络的情况下，依旧可以运行。这是PWA非常重要的特性。
-
Notification API
我们对于手机上接收推送消息比较熟悉。web 页面也能接收到后台通知的。甚至在电脑上也能发送通知。通知需要用户授权后，方能工作。一旦授权，我们就能在适当的时机推送消息。因为期望用户一直打开浏览器是不现实的。所以我们希望有常住线程的内存。显然Service Worker 是最合适的选择。
