什么是ServiceWorker
ServiceWorker
是H5
的新API
,是一段运行在浏览器后台的JavaScript
脚本,独立于当前页面,因此不能和网页交互,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请求。
ServiceWorker生命周期
- 安装
- 激活,激活成功后可进入
chrome://inspect/#service-workers
查看当前的serviceworker
,这个阶段对资源进行缓存 - 监听,处理请求,若请求的资源被缓存过直接使用,否则向用户展示缓存的404页面。
销毁
- 只支持
https
协议或者localhost
- 生命周期独立于
web
页面
- 只支持
一般断网后,页面会直接出现无法访问网站这样的提示,用chrome -> 开发者工具 -> New Work -> offline
可模拟断网,
ServiceWorker生命周期中的重要事件
install
页面加载时触发,此过程完成后,资源将被缓存
fetch
fetch
用于拦截用户请求,并响应,返回Promise
对象- 提供
Request
和Response
对象,前端可以用Request
对象发起请求,在serviceworker
中可用Response
对象响应请求。
关键代码解析:
if ('serviceWorker' in navigator) {//serviceworker是navigator上面的属性
navigator.serviceWorker.register('./service-worker.js').then(function(registration) {//注册serviceworker,service-worker.js和HTML页面在同级目录下,serviceworker大量依赖于promise,这里添加resolve或reject回调
//resolve, 注册成功
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// reject,注册失败
console.log('ServiceWorker registration failed: ', err);
});
}
下面便是缓存资源和离线响应资源的代码:
'use strict';
var cacheVersion = 0;
var currentCache = {
offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline.html';
this.addEventListener('install', event => {//开始安装serviceworker
event.waitUntil(//caches.open打开的是一个自己命名的缓存名称
caches.open(currentCache.offline).then(function(cache) {
return cache.addAll([//这里便是待缓存的资源
'./offline.svg',
offlineUrl
]);
})
);
});//只有当所有资源都被缓存成功后install才算完成,因此要慎重考虑哪些资源应该被缓存
this.addEventListener('fetch', event => {
//fetch事件在安装成功后,离线请求时响应,在线时,若请求的资源再serviceworker中,则走200 OK (from ServiceWorker),离线时也是这个状态码
if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
event.respondWith(
fetch(event.request.url).catch(error => {
// Return the offline page
return caches.match(offlineUrl);
})
);
}
else{
event.respondWith(caches.match(event.request)
.then(function (response) {
return response || fetch(event.request);
})
);
}
});
双向通信
浏览器有3中worker:
- dedicated worker:专用worker
- shared worker:共享worker
- service worker
他们都可以通过postmessage
和onmessage
进行通信
特点
serviceworker相比于XMLHTTPRequest请求优势:
- 返回promise对象,减少回调嵌套。
- 可利用Request和Response对象,响应用户请求
serviceworker的存储是异步的,localStorage和sessionStorage的存储是同步的。
获取更多serviceworker内容