最近几天领导让做一个数据库库备份的功能, 在前端页面点击一个按钮,调取后端一个服务,后端进行数据库备份,备份成功后,给后台返回状态码. 思路很明确,逻辑很清楚.但有个问题是,后端备份数据库需要很久时间,在这段时间,前台要怎么处理这个过程那,后端返回后又改怎么处理那? 我细细思考了一会,突然灵光乍现,一个词出现在我的脑海里了, serviceWorker
Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件,可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息。
1.网络代理,转发请求,伪造响应
2.离线缓存
3.消息推送
4.后台消息传递
1、离线缓存:可以将H5应用中不变化的资源或者很少变化的资源长久的存储在用户端,提升加载速度、降低流量消耗、降低服务器压力。如中重度的H5游戏、框架数据独立的web资讯客户端、web邮件客户端等
2、消息推送:激活沉睡的用户,推送即时消息、公告通知,激发更新等。如web资讯客户端、web即时通讯工具、h5游戏等运营产品。
3、事件同步:确保web端产生的任务即使在用户关闭了web页面也可以顺利完成。如web邮件客户端、web即时通讯工具等。
4、定时同步:周期性的触发Service Worker脚本中的定时同步事件,可借助它提前刷新缓存内容。如web资讯客户端。
简单介绍一下serviceWorker之后,让我来说一下实现思路
首先,当用户点击页面的数据库备份按钮时, 这时触发一个 serviceWorker的postMessage 方法,进入 serviceWorker线程中,去调取后台接口, 在后台接口返回后,触发客户端的postMessage 函数,将信息以通知的方式显示到页面上
这种实现方式,可以在用户点击按钮后,想干嘛就去干嘛,不用停留在这个页面,等到后端返回接口信息后,再以浏览器通知的方式通知用户 OK!
这里我给大家演示一个demo
首先创建一个index.html和一个sw.js
index.html,是页面,
sw.js 是serverWorker的线程处理函数
首先看index.html
Service Worker Demo
一个按钮,一个触发事件 一个通知函数 就是这么简单
再来看看sw.js是怎么处理的
self.addEventListener('message', function(event) {
var promise = self.clients.matchAll()
.then(function(clientList) {
setTimeout(function(){
clientList.forEach(function(client) {
client.postMessage({
client: senderId,
message: event.data
})
})
},3000)
})
if (event.waitUntil) {
event.waitUntil(promise);
}
});
self.addEventListener('activate', function(event) {
event.waitUntil(self.clients.claim());
})
监听了message事件,进行处理,3秒后,向所有浏览器窗口推送消息 这样就Ok了
参考资料
1、https://www.w3.org/TR/service-workers/
2、https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
3、https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/