serviceWorker 初尝试, 提升用户体验,改善前后端交互方式
serviceWorker 初尝试, 提升用户体验,改善前后端交互方式
背景介绍:
最近几天领导让做一个数据库库备份的功能, 在前端页面点击一个按钮,调取后端一个服务,后端进行数据库备份,备份成功后,给后台返回状态码. 思路很明确,逻辑很清楚.但有个问题是,后端备份数据库需要很久时间,在这段时间,前台要怎么处理这个过程那,后端返回后又改怎么处理那? 我细细思考了一会,突然灵光乍现,一个词出现在我的脑海里了, serviceWorker
serviceWorker简介:
Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件，可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息。
serviceWorker作用:
1.网络代理，转发请求，伪造响应 2.离线缓存 3.消息推送 4.后台消息传递
Service Worker优势及典型应用场景
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Service Worker Demo</title>
</head>
<body>
<button id='sendBtn'>备份数据库</button>
<script>
function showNotice() {
Notification.requestPermission(function (perm) {
if (perm == "granted") {
var notification = new Notification("你有一条新的通知:", {
dir: "auto",
lang: "hi",
tag: "message",
body: "数据库备份成功!!!"
});
}
})
}
(function() {
if ('serviceWorker' in navigator) {
var sendBtn = document.getElementById('sendBtn');
navigator.serviceWorker.register('sw.js');
navigator.serviceWorker.addEventListener('message', function (event) {
showNotice()
});
sendBtn.addEventListener('click', function() {
navigator.serviceWorker.controller.postMessage();
})
}
})();
</script>
</body>
</html>一个按钮,一个触发事件 一个通知函数 就是这么简单
再来看看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/
腾讯云开发者
