深入ServiceWorker，消息推送，后台同步，一网打尽！

丰富的线上&线下活动，深入探索云世界

做任务，得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流，直击现场

海量开发者使用工具、手册，免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

上一章讲到了ServiceWorker的基础使用，但是它的功能不仅仅只有这些，还有很多很多，比如消息推送，后台同步，甚至还有WebRTC，这一章我们来进阶ServiceWorker。

在开始之前，我们先做一下前期的准备，还是使用我上一篇的例子，但是我们需要删除service-worker.js里面的缓存代码，因为这一章用不上，新看到的小伙伴可以直接用我下面的代码也行：

消息推送使用ServiceWorker是一定要了解消息推送的，因为它是ServiceWorker的一个重要功能，它可以让你的网站在用户不在的时候，也能够接收到消息，这对于一些即时通讯的网站来说，是非常重要的。

按照正常的消息推送流程，我们需要经历下面几个步骤：

在讲推送流程之前，我们先来体验一下消息推送的快感。

啥也不多说，直接上代码：

上面的方法直接让我们在window上显示了一个消息，但是这个消息是没有任何交互的，我们可以通过Notification对象来实现交互：

这样我们就可以在消息上添加交互了，但是这个交互是没有任何效果的，我们需要通过监听notificationclick事件来实现交互：

//service-worker.js//监听notificationclick事件self.addEventListener('notificationclick',(event)=>{//判断点击的是哪个按钮if(event.action==='yes'){console.log('yes');}elseif(event.action==='no'){console.log('no');}});这个时候我们就可以在控制台看到点击的是哪个按钮了，接下来我们就来认识一下showNotification方法。

showNotification方法是ServiceWorkerRegistration对象的一个方法，它可以用来显示消息，直接看函数签名：

通过上述的实验代码，不知道大家有没有发现一个问题，就是showNotification方法调用出来的消息是直接显示在window上的，而不是显示在浏览器的通知栏上。

这是因为消息推送是浏览器行为，作用在window系统上，而不是作用在网页上。

通过这个案例，有没有产生一个想法，就是大家在写业务代码的时候，遇到消息通知都是自己手写一个弹窗消息，切换个网页就看不到了；

这个时候我们使用showNotification方法，直接推送到window上，虽然样式不能自定义，但是是不是逼格更高呢？

而我们的showNotification方法，其实是通过Notification对象来实现的，点到为止，继续学习ServiceWorker。

为什么要先体验消息推送的效果呢，再来讲消息推送的流程呢？

因为不想打击大家的热情，消息推送因为会被墙，所以在国内没有多少人使用，所以我们先体验一下，再来讲消息推送的流程。

现在我们直接上代码来查看整体流程是怎么样的：

if('serviceWorker'innavigator){//1.注册`ServiceWorker`获得`registration`对象//2.通过`registration`对象获得`PushManager`对象//3.通过`PushManager`对象订阅消息推送，获得`subscription`对象//4.将`subscription`对象发送给服务器，由服务器保存//5.服务器通过`subscription`对象推送消息//6.`ServiceWorker`通过监听`push`事件，获得推送的消息//7.`ServiceWorker`通过`showNotification`方法，显示消息//1.注册`ServiceWorker`获得`registration`对象navigator.serviceWorker.register('/service-worker.js',{scope:'/'}).then((registration)=>{//2.通过`registration`对象获得`PushManager`对象constpushManager=registration.pushManager;//3.通过`PushManager`对象订阅消息推送，获得`subscription`对象pushManager.subscribe({userVisibleOnly:true,applicationServerKey:''}).then((subscription)=>{//4.将`subscription`对象发送给服务器，由服务器保存console.log(subscription);});});}前面的四步都是在客户端完成的，这里的关键在于第三步，通过PushManager对象订阅消息推送，获得subscription对象。

我们先来看一下subscribe方法的参数和简介：

interfacePushSubscriptionOptions{userVisibleOnly:boolean;applicationServerKey:BufferSource;}interfacePushManager{/***订阅消息推送*@paramoptions*options.userVisibleOnly:是否只有用户可见*options.applicationServerKey:服务器公钥*@returns{Promise}*/subscribe(options:PushSubscriptionOptions):Promise;}这里的options在文档上显示是可选参数，但是在部分浏览器上是必填参数，所以我们在调用subscribe方法的时候，需要传入options参数。

参数介绍：

这里的重点就是applicationServerKey，这个是由我们自己生成的，接下来我们来看一下如何生成。

我们可以通过web-push这个库来生成服务器公钥，这个库是Google开发的，旨意是打通多端消息推送的通道，它提供了一些工具，可以帮助我们生成服务器公钥，以及发送推送消息。

安装web-push会被墙，可以通过切换npm源来解决：

npminstallweb-push安装完成后，我们就可以使用web-push来生成服务器公钥了：

constwebpush=require('web-push');//生成服务器公钥constvapidKeys=webpush.generateVAPIDKeys();console.log(vapidKeys);我们也可以全局安装web-push，然后通过命令行来生成服务器公钥：

上面生成的密钥对会有一个公钥和一个私钥，私钥放在服务器保存，公钥用于注册推送订阅：

pushManager.subscribe({userVisibleOnly:true,applicationServerKey:'BHXrxJPYpQSwGMwcN-HprCaU_Po9POIUvqWFLFq9UUNHP5SNJKxk_Io59y8_twMTOuB5SbpbcPBwHFo2kBUj7vQ'}).then((subscription)=>{//4.将`subscription`对象发送给服务器，由服务器保存console.log(subscription);});上面注册成功后，会返回一个subscription对象，这个对象就是推送订阅，我们需要将这个对象发送给服务器，由服务器保存，用于后续推送消息。

有时候注册过了如果再重复注册会报错，可以通过pushManager.getSubscription()来获取已经注册的subscription对象。

pushManager.getSubscription().then((subscription)=>{if(subscription){//这里subscription就是已经注册的subscription对象return;}pushManager.subscribe({userVisibleOnly:true,applicationServerKey:'BHXrxJPYpQSwGMwcN-HprCaU_Po9POIUvqWFLFq9UUNHP5SNJKxk_Io59y8_twMTOuB5SbpbcPBwHFo2kBUj7vQ'}).then((subscription)=>{console.log(subscription);});});发送推送消息推送消息我们同样也是通过web-push来发送，它提供了一个sendNotification()方法，可以帮助我们发送推送消息。

这里我们通过node服务来写一个简单的推送消息的接口：

ServiceWorker监听推送消息，我们需要在ServiceWorker中注册push事件，然后在push事件中处理推送消息，也就是最开始提到的showNotification()方法。

自此一整套的消息推送和接收的流程就走完了，但是为什么要订阅推送消息？为什么我自己的服务器还需要申请啥GCMApiKey？

这就要说到消息推送的很多知识了，这里不宜过多的展开，有兴趣的可以自行了解。

我们这里需要了解的是订阅到服务器推送之间的过程倒是是什么样的，为什么我说推送消息会被墙，为什么我们推送消息会不成功？

这里我们直接看下面的流程图：

graphTDA[订阅推送消息]-->B[FCM服务器]B-->C1[验证不通过抛出异常]B-->C[返回subscription对象]C-->D[将subscription对象保存到服务器]D-->E[服务器向FCM服务器发送推送消息]E-->F[FCM服务器将消息直接推送给浏览器]F-->G[浏览器接收到推送消息调用push回调]F-->G1[浏览器不在线推送消息会在浏览器上线时通过notificationcallback回调]G-->H[执行push事件里面的回调函数]可以看到服务和浏览器之间是没有直接的通信的，而是通过FCM服务器来进行通信的；

而FCM服务器是谷歌的服务器，所以我们不管是订阅还是推送消息都需要通过谷歌的服务器，这就是为什么我们推送消息会被墙的原因；

PC不像移动端，你的网页或者浏览器不会一直开着，所以你的网页或者浏览器不在线的时候，你的推送消息是不会被推送到你的浏览器的，这个时候你的推送消息就会被FCM服务器保存起来，等你的网页或者浏览器上线的时候，FCM服务器会通过notificationcallback回调来推送消息到你的网页或者浏览器。

self.addEventListener('notificationcallback',function(event){constdata=event.data.json();self.registration.showNotification(data.title)});注意：这个回调是在离线的时候有推送消息，然后在你的网页上线的时候才会触发，如果你的网页一直在线，那么这个回调是不会触发的。

ok，到这里我们已经了解了推送消息的一些知识，我们继续下面的环节。

上面讲到了push事件的监听，现在就还剩下sync事件的监听了，sync事件是在ServiceWorker中注册的，当我们调用navigator.serviceWorker.ready方法后，就可以通过registration.sync.register()方法来注册sync事件了。

//注册sync事件navigator.serviceWorker.ready.then((registration)=>{returnregistration.sync.register('sync');});这里我们注册了一个sync事件，这个事件的名字叫sync，这个名字是自己定义的，可以随便定义，但是需要注意的是，这个名字是全局唯一的，如果你注册了一个sync事件，那么下次再注册的时候，就不能再注册一个sync事件了，否则会报错。

上面注册好了之后，就需要在ServiceWorker中监听这个事件了：

//监听sync事件self.addEventListener('sync',(event)=>{if(event.tag==='sync'){event.waitUntil(//同步数据syncData());}});相对于push事件，sync事件的监听就简单多了，我们只需要判断一下事件的名字，然后执行对应的操作就可以了。

使用sync事件首选需要注册一个sync事件，通过registration.sync.register()方法来注册；

上面使用到navigator.serviceWorker.ready是用来确保ServiceWorker已经注册成功，它会返回一个不会失败的Promise对象，如果没有注册成功，那么就会一直处于pending状态。

在ServiceWorker中监听sync事件，通过self.addEventListener('sync',callback)方法来监听，这个callback函数会接收一个event对象，通过event.tag来判断事件的名字，然后执行对应的操作。

看名字就知道，sync事件是用来同步数据的，那么我们什么时候需要同步数据呢？

sync的使用场景有很多，我下面列举几个：

通常我们可以使用这个事件来通知ServiceWorker同步数据，或者更新缓存，继续拿我之前的百万数据的例子来说；

百万数据很大，在上一篇中我们将数据缓存下来了，但是如果数据发送了变化，那么我们就需要更新缓存，这个时候就可以使用sync事件来通知ServiceWorker更新缓存。

//main.js//请求后台查询数据是否有变化fetch('/api/check').then((res)=>{returnres.json();}).then((data)=>{if(data.hasChange){//有变化，注册sync事件navigator.serviceWorker.ready.then((registration)=>{returnregistration.sync.register('sync');});}});//service-worker.js//监听sync事件self.addEventListener('sync',(event)=>{if(event.tag==='sync'){event.waitUntil(//同步数据syncData());}});//同步数据functionsyncData(){//请求后台获取数据returnfetch('/getData').then((res)=>{returnres.json();}).then((data)=>{//更新缓存caches.open('my-caches').then((cache)=>{cache.put('/getData',newResponse(JSON.stringify(data)));});});}上面的代码中，我们在main.js中请求后台查询数据是否有变化，如果有变化，那么就注册一个sync事件，然后在ServiceWorker中监听这个事件，当事件触发的时候，就会执行syncData方法，这个方法中会请求后台获取数据，然后更新缓存。

本文的最开始给了一段注释的代码，这段代码是用来更新ServiceWorker的，就是下面这段代码：

navigator.serviceWorker.getRegistrations().then((registrations)=>{for(letregistrationofregistrations){registration.unregister()}});这段代码并不是用来更新ServiceWorker的，而是用来卸载ServiceWorker的，所以最开始我注释说明是开发阶段使用的，因为我们在开发阶段，经常会修改ServiceWorker的代码，如果不卸载ServiceWorker重装很有可能缓存没有清除，导致我们看到的效果和预期的不一样。

但是在生产环境中，我们肯定是不能轻易卸载ServiceWorker的，当然ServiceWorker也提供了更新的方法，我们可以通过ServiceWorker的update方法来更新ServiceWorker。

//更新ServiceWorkernavigator.serviceWorker.getRegistration().then((registration)=>{registration.update();});上面的代码中，我们通过getRegistration方法获取ServiceWorker的注册对象，然后调用update方法来更新ServiceWorker。

同样，是否需要更新ServiceWorker，也是需要我们自己来判断的，比如我们可以通过ServiceWorker的scriptURL属性来判断ServiceWorker的版本，如果版本不一致，那么就更新ServiceWorker。

//更新ServiceWorkernavigator.serviceWorker.getRegistration().then((registration)=>{if(registration.scriptURL!=='/service-worker.jsv=1.0.0'){registration.update();}});通常我们会将ServiceWorker的版本号放在scriptURL中，这样就可以通过scriptURL来判断ServiceWorker的版本了。

上面说到了ServiceWorker的更新，我们的缓存也是需要更新的，比如我们的ServiceWorker更新了，那么我们的缓存也需要更新，这样才能保证我们正常的版本迭代。

缓存在上一章中，是使用了自定义的cacheName来进行缓存的，其实我们可以用版本号来进行缓存，和ServiceWorker保持一致，然后在更新的时候删除对应的缓存：

//更新ServiceWorkernavigator.serviceWorker.getRegistration().then((registration)=>{if(registration.scriptURL!=='/service-worker.jsv=1.0.0'){registration.update();//删除缓存caches.delete('v1.0.0');}});上面的代码中，我们在更新ServiceWorker的时候，也删除了缓存，这样就可以保证我们的缓存和ServiceWorker的版本一致了。

本章几乎探索完了ServiceWorker的高频常用知识，以目前了解的ServiceWorker的知识来说，本章的内容已经足够满足大部分的需求了；

当然这只是一个起点，ServiceWorker的知识还有很多，而且并不是只围绕着ServiceWorker来讲，还有很多周边的知识；

例如本章讲到的showNotification方法，其实是Notification的API，push方法，其实是Push的API，还有很多；