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

 

    
        
        
    
    
        备份数据库
        
    

一个按钮,一个触发事件  一个通知函数  就是这么简单

 

再来看看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/