PWA简介和关键 api

我不是女神ヾ 2022-12-06 15:50 288阅读 0赞

**全称:**  
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 同样保证了安全性