Web Worker
Worker 和 主线程互不干扰，通常用于替主线程分担计算密集型任务，防止主线程中JS执行时阻塞UI（注意，每个网页Tab中，JS的主线程和UI线程是会互相阻塞的，以防止渲染前后获得的元素数据不一致）。
Worker本身也会耗费资源，因此一旦使用完毕，就应该分别使用terminate和close方法关闭。
- worker线程无法读取本地文件，因此其脚本文件也必须为网络资源，且必须与主线程脚本文件同源
- worker无法读取/操作dom对象，没有
alert()和confirm()方法，也无法获取document、window、parent，但是可以获取navigator和location。
基本用法
主线程
- 主线程和web worker通过message事件传递信息(信息在event.data里)
- 通过
onerror可以监听子线程中的报错，通过onmessageerror可以监听通讯内容无法序列化成字符串
//webworker.html
var worker = new Worker('worker.js', { name : 'myWorker' });
worker.onerror = function (e) {
console.log('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);
};
worker.postMessage({ a: 18 });
worker.onmessage = function (event) {
console.log("event", event);
console.log('Received message ' + (event.data.a + event.data.b));
}
// worker.terminate();
-
通信是深拷贝关系，即是传值而不是传址，不会互相影响。当拷贝二进制内容（
File、Blob、ArrayBuffer等）时可使用Transferable Objects方式将数据转移而非拷贝，以节省内存
worker.postMessage(arrayBuffer, [arrayBuffer]);
// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
子线程
- 子线程中
this指向全局对象self(类似主线程中的windows) - 子线程可以通过
importScripts加载其他JS - 通过
onmessageerror可以监听通讯内容无法序列化成字符串
// worker.js
console.log("worker ready", this === self);
console.log(name);//myWorker
addEventListener(
"message",
function (e) {
postMessage(Object.assign(e.data, { b: 20 }));
},
false
);
importScripts("other.js");
// self.close();
service worker
基于web worker（因此拥有web worker的各种特性），充当服务器与浏览器之间的代理服务器（可以拦截请求，并作出开发者指定的动作），拥有离线缓存能力
- 它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用
- 出于安全考量，Service Worker 只能使用在
https或本地的localhost环境下 - 不同于Web Worker，Service Worker 是一个进程而不是线程，其生命周期与页面无关（关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动），且可以被多个页面公用
查看与调试
- Application标签，其中Service Workers和Cache Storage可以查看已使用的内容
勾选Update on reload则每次页面刷新都使用最新的Service Worker文件，否则Service Worker每24小时被下载一次，如果下载的文件是最新文件，那么它就会被重新注册和安装，但不会被激活，当不再有页面使用旧的 Service Worker 的时候，它就会被激活。 - Network标签，可以看到来自ServiceWorker的资源，Size项总为
from ServiceWorker
生命周期
- SW 首先会触发
install(每个SW只会一次)，当SW被修改后，浏览器会认为这是一个新的 SW，从而再触发install事件 -
activate只会在install之后触发(每个SW只会一次)，如果此时已经有旧的SW在使用中，则新的SW在install之后进入waiting状态，直到旧的SWterminated之后，才能activate。- 这个
terminated的时机有如下几种方式：- 关闭浏览器一段时间；
- 手动清除serviceworker；
- 在新SW的
install中调用skipWaiting()跳过waiting阶段
- 这个
- 默认情况下，页面的请求（fetch）不会通过 SW，除非它本身是通过 SW 获取的。也就是说，在第一次进入页面并安装 SW 之后，发生的请求依然不会被SW的fetch拦截，需要刷新页面才能有效果。
- 通常在
activate事件中通过调用clients.claim()改变这种默认行为
- 通常在
生命周期
实际案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>serviceWorker</title>
</head>
<style>
img {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<img src="./test.png">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3155998395,3600507640&fm=26&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1970585368,2576171845&fm=26&gp=0.jpg" alt="">
</body>
<script>
console.log("caches", caches)
/* 判断当前浏览器是否支持serviceWorker */
if ('serviceWorker' in navigator) {
/* 当页面加载完成就创建一个serviceWorker */
window.addEventListener('load', function () {
// 第一个参数Origin指定serviceworker的脚本文件，该相对路径是相对于Origin目录而非当前JS文件
// 第二个参数Config是可选的，可以用来指定你想让 service worker 控制的内容的子目录。默认值'./'
// 同一个Origin下，可以注册多个不同scope的Service Worker。
navigator.serviceWorker.register('./serviceWorker.js', { scope: './' })
.then(function (registration) {
// setInterval(() => {//每分钟检查一次serviceWorker.js是否更新
// registration.update();
// }, 60000);
console.log('register success', registration);
navigator.serviceWorker.controller.postMessage("来自页面的信息");
})
.catch(function (err) {
console.log('register fail', err);
});
});
navigator.serviceWorker.addEventListener('message', function (event) { console.log(event.data) })
}
</script>
</html>
var versionName = "V2";
// 注册完 Service Worker 之后，浏览器自动安装，在 service worker 文件中可以监听它的 install 事件。
/* 监听安装事件，install 事件一般是被用来设置你的浏览器的离线缓存逻辑 */
addEventListener("install", function (event) {
console.log("Service Worker install", event);
//调试时跳过等待过程
// skipWaiting();
/* 这个方法接收一个Promise，用于防止缓存完成前serviceWorker就被关闭/休眠 */
event.waitUntil(
/* 新建或打开名叫V1的缓存版本 */
caches.open(versionName).then(function (cache) {
/* 指定要缓存的内容，添加进当前指定的缓存版本中*/
return cache.addAll([
"./test.png",
"./serviceWorker.html",
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3155998395,3600507640&fm=26&gp=0.jpg",
]);
})
);
});
/* 监听fetch事件以拦截get请求 */
addEventListener("fetch", function (event) {
console.log("try to fetch", event.request);
/* 在缓存中匹配对应请求资源,如存在则直接返回,否则照常fetch */
event.respondWith(
caches.match(event.request).then((res) => {
if (!res) console.log("no res");
return (
res ||
fetch(event.request)
.then((responese) => {
//也可以在此处动态缓存get请求
// caches.put(event.request, response);
return responese;
})
.catch((err) => {
console.log(err);
})
);
})
);
});
addEventListener("message", function (event) {
console.log("message", event.data); // this message is from page
event.source.postMessage("来自serviceWorker的信息");
});
addEventListener("activate", function (event) {
console.log("Service Worker activate", event);
event.waitUntil(
// Cache Stroage 中的缓存不会过期，但是浏览器对它的大小是有限制的，所以需要我们定期进行清理；
caches.keys().then((keys) => {
//找到所有已存在的缓存版本名的数组
console.log("keys", keys);
return Promise.all(
keys.map((key) => {
if (versionName != key) {
console.log(key);
return caches.delete(key); // 删除之前版本的cache storage
}
})
);
})
);
});
避免改变 SW 的 URL
- index.html注册了sw-v1.js作为SW。
- sw-v1.js对index.html做了缓存，也就是缓存优先（offline-first）。
- 你更新了index.html重新注册了在新地址的 SW sw-v2.js.
如果你像上面那么做，用户永远也拿不到sw-v2.js，因为index.html在sw-v1.js缓存中，这样的话，如果你想更新为sw-v2.js，还需要更改原来的sw-v1.js。
Workbox
通过google推出的Workbox插件可以更方便得使用service worker
