调研pwa和sw

概述

处于好奇，最近我调研了一下pwa和service worker，有些新的，记录下来，供之后开发时参考，相信对其余人也有用。pwa主要是经过service worker实现的，它主要包括桌面图标，离线缓存和消息推送这三个方面。

注意：开启service worker须要https环境，详细搭建流程能够看我上一篇博文。

service worker的离线缓存可使用封装好的sw-precache库实现，其它功能能够用sw-toolbox库实现；另外还有一个新的库workbox-sw能够取代这2个库。

参考资料：

Service Workers 和离线缓存

Web Push

mdn Using Service Workers

RE0：在Vue里用Service Worker来搞个中间层（React同理）（超详细）

桌面图标

实现桌面图标须要项目中有service worker和manifest文件。

其中pc端不支持manifest文件，ios移动端也不支持，只有安卓移动端才支持manifest文件。

离线缓存

service worker有这样一条特性，就是它会拦截全部的http请求，因此在使用service worker的时候需谨慎。

而且，service worker在pc和移动包括ios上面都已经有良好的支持了。

另外，service worker还有离线缓存的api能够缓存数据，能够在拦截http请求后判断是否须要使用离线数据，也能够设置以什么方式使用离线数据。

消息推送

service worker其实在本地进程中开了一个本地服务器，而后能够经过这个服务器来作许多有意思的事情，好比消息推送。

消息推送的原理是，在service worker建立的时候就给远程推送服务器发送一个标识，而且监听推送事件，而后远程推送服务器在须要推送的时候就给标识列表的全部服务器发送推送信息，而后service worker就能够接收这些推送信息，利用h5的notification api显示推送信息。

其它

因为service worker在浏览器本地开了一个服务器（是在进程里面，能够不会由于浏览器关闭而关闭），因此它还能作另一些激动人心的事情：

1. sw服务器中间层。通常来讲，不少项目会使用nodejs搭建一个数据中间层处理数据，可是如今能够把这个中间层放到浏览器的sw里面。

2. 缓存自动更新，由于咱们的数据都是经过api请求的，若是缓存这些数据就不能更新拿到最新数据了，可是经过sw就能够在须要更新的时候接收远程服务器的更新推送，而后拦截http请求，给有须要的接口从新发送http请求，给不须要的接口就用缓存的数据。

3. sw处理业务数据。大数据相关的项目，通常在接口方面须要先进行不少和业务数据相关的处理，若是在项目中处理的话会很繁琐，如今能够拿到sw里面处理。