Web Workers

web worker

JavaScript是单线程的，遇到计算密集型或高延迟的任务时，会影响整个页面的运行。Web Worker就是在这样的环境下诞生的，为JavaScript创造多线程环境，所以多线程能力并不是JavaScript原生具有的，而实浏览器宿主环境提供的！另外，Web Worker需要手动关闭，否则会一直运行。
主线程和web worker线程通过 postMessage() 传递数据，其实是数据的序列化与反序列化的过程，涉及的算法是结构化克隆算法，通过 SharedArrayBuffer 实现主线程和web worker线程的内存共享！

sharded worker

一个共享的web worker
普通的web worker直接使用new Worker()创建，是当前页面专有的。而shared worker可以多个标签页面、iframe共享。当然，这些页面必须是同源的！

# 页面A
var myWorker = new SharedWorker("worker.js");
myWorker.port.onmessage = function(e) {
    console.log(e.data) // Hello AA
}
button.onclick = () => {
    myWorker.port.postMessage({type: 'AA', data: 'Hello BB'});
}

# 页面B
var myWorker = new SharedWorker("worker.js");
myWorker.port.onmessage = function(e) {
    console.log(e.data) // Hello BB
}
button.onclick = () => {
    myWorker.port.postMessage({type: 'BB', data: 'Hello AA'});
}

# worker.js
var AA = null, BB = null
onconnect = function(e) {
    var port = e.ports[0];
    // 被动推送
    port.onmessage = function(e) {
        var { type, data } = e.data
        if(type === 'AA') {
            AA = data
            port.postMessage(BB);
        } else if(type === 'BB') {
            BB = data
            port.postMessage(AA);
        }
    }
}

service worker

Service Worker 实际上是浏览器和服务器之间的代理服务器；
最大的特点就是在页面中注册并安装成功后，运行于浏览器后台，且不受页面刷新的影响，可以监听和拦截作用域范围内所有页面HTTP请求。

功能特性：离线缓存，转发请求、网络代理、伪造响应、消息推送。

缓存时使用的API：Cache、CacheStorage

• Cache 是单个缓存库
• CacheStorage 是一个管理着所有Cache的库

MDN：Service worker是Web Worker的一种，运行在worker上下文，因此它不能访问DOM和Window，可以利用self访问全局上下文。相对于驱动应用的JS主线程，它运行在其他线程中，所以不会造成阻塞。它设计为完全异步，同步API如XHR、localStorage 不能在Service worker中使用。

MDN：出于安全考量，Service worker 只能由HTTPS承载，毕竟修改网络请求的能力暴露给中间人攻击会非常危险。在Firefox浏览器的用户隐私模式，Service Worker不可用。
PS：本地服务器（127.0.0.1 / localhost）也是可以的！
注意：Service workers大量使用Promise，因为通常它们会等待响应后继续，并根据响应返回一个成功或者失败的操作。Promise非常适合这种场景。

MDN：注意：Service worker更优于以前的同类尝试如AppCache，是因为它们无法支持当操作出错时终止操作。Service worker可以更细致地控制每一件事情。

生命周期

serviceworker.png

• 安装
  当浏览器加载运行了Service Worker页面时，Service Worker的 JS 文件也被下载下到本地，然后运行安装，下载相关缓存。安装完之后，就会激活Service Worker (Activated)
• 激活
  激活Service Worker后，Service Worker开始控制页面后台，当刷新页面或发送请求时，在Service Worker中对请求进行拦截，然后进行相应的操作，比如检查是否命中缓存（尤其是无网络或网络差的情况下），如果命中，则优先返回。
• 等待
• 销毁（解雇）

Service Worker在浏览器运行时，每隔一段时间就会在后台尝试重新下载Service Worker的JS文件，只要新的JS文件和本地有一点不相同，那么就会重新 安装 -> 激活。

Service Worker也是PWA的实现方式之一：浏览器离线和弱网络环境实现急速访问。

webbox

然而，在 Service Worker 中通过监听事件，编写对应的逻辑并不是一件简单的事情，尤其是对于文件缓存，可能 npm run build 后，名称随时都会变。所以，Chrome官方推出了 webbox 框架。
webbox 是用于向 web 应用程序添加离线支持的JavaScript库。

PWA之Workbox