PWA简介和关键 api

全称:
Progressive Web App 渐进式网络应用

具体业务上的部署并非一蹴而就, 可以循序渐进的实现它, 每次实现一部分, 这个特性降低了业务的部署成本, 也适应了浏览器厂商的更新节奏, 更容易被开发者接受

==PWA 如何实现渐进式? ==

PWA 组成技术及特性:
Service Worker 服务工作线程.

• 常驻内存运行
• 代理网络请求
• 依赖 https
• 就是 pwa 的大脑

区别于 webworker 独立于浏览器主线程的环境, 一般用来计算复杂的计算操作, 不阻塞页面渲染

install 事件发生在新的 service worker 下载之后, 去拉取并缓存必要的资源
activate 事件发生在新的 service worker 被启用时, 去清除上一个 service worker 版本遗留下来的无用缓存
fetch 发生在捕获到资源请求之时, 去查询并返回缓存中的资源

前两个只会发生一次
最后一个可以发生无数次

Promise

• 优化回调地狱

不使用 promise 代码格式
readFile(filename, (err, content) => {
  parseXML(content, (err, xml) => {
 })
})

使用 promise 
readFile(filename).then(content => parseXML(content).then(xml => {}).catch(error)

使用 async await

• service worker 的 api 风格

fetch

• 网络请求
• 存在一些不足

fetch 函数是一个全局函数, 用来发起 http 请求
以前用xmlrequest 访问异步接口

使用 xmlrequest 
-----------------
const xhr = new XMLHttpRequest();
// 设置 responseType. 代表 http 的返回值需要被自动格式化成 json. 
// 通过 xhr.response 获取到解析后的 json 对象.
xhr.responseType = 'json'
// 监听 xmlrequest 事件
// 每次触发事件后, xml 上面的一个属性就发生变化
xhr.onreadystatechange = ()  => {
    // 判断这个属性
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response);
        }
    }
};

xhr.open('GET', '/userinfo.json', true);
xhr.send(null)

使用 fetch 实现
----------------
// 调用 fetch 函数, 传入资源路径, 返回 promise, then 中可以直接获取到 response, 
// 通过 response 转换成 json 格式数据打印
fetch('/userinfo.json').then( response => response.json()).then(info => console.log(info));

cache API

• 支持资源的缓存系统, 依赖 service worker 代理网络请求

这是一种很强大的 api, 以前在浏览器端我们往 cookie, localstorage,甚至 indexdb 里面去写入数据, 但是都属于内存数据
对于资源, 比如 js css 图片等没有办法操作
有了 cache api 就不同了
可以直接拦截资源请求, 并返回 cache 中的数据, 这个过程对浏览器是透明的, 这允许我们的 web 页面在没有网络条件下依然能够运行
这是 pwa 的一个重要特性

Notification API

需要用户授权
希望用户一直打开浏览器并不现实, 所以希望能有常驻内存的线程
所以 service worker 是最合适的角色

Notification 全局对象, 也是一个构造函数. 它有一个重要属性: permission 代表当前页面已经获取到的授权, 必须受到严格授权限制. 它有三个值分别是:
default 没授权也没拒绝, 应该向用户弹出授权请求. 
denied 禁止
granted 通过

---

推论:
有了这些强大 api 的加持, 我们能写出近乎于原生应用相媲美的 web 应用, 因为有了离线能力, 推送能力, 甚至还可以安装启动桌面图标, 相比于原生 app, pwa 仍然继承了 web 天生开放的基因, 拥有持续更新, seo, url 分享等原生 app 不具备的特性. 这也是 pwa 最大的魅力所在.
同时, pwa 严格依赖 https 同样保证了安全性