当前位置: 首页 > Web前端 > HTML

ServiceWorker(Web)推送不完整实践

时间:2023-03-28 16:43:57 HTML

以下实践结论来自Windows平台Edge浏览器和Mac平台Chrome浏览器事件//worker.jself.addEventListener("install",(event)=>{self.skipWaiting()})self.addEventListener('activate',(event)=>{event.waitUntil(()=>{})})self.addEventListener('push',(event)=>{event.waitUntil(()=>{})})self.addEventListener('sync',(event)=>{event.waitUntil(()=>{})})代码包含的四个事件中,install和activate事件是生命周期事件的服务工作者。event.waitUntil方法也很重要。install:install事件在一个worker安装或更新时发生,然后进入等待状态,在一定时间进入激活状态,避免与旧激活的worker发生冲突。调用skipWaiting跳过等待。activate:activate事件表示当前worker已经正式开始工作。push:push事件是web-push能力的业务消息推送事件。重点之一。sync:sync由页面客户端发起,我们可以用它来做一些推送的能力。重点之一。WebPush网络推送依赖于浏览器客户端的推送能力,由(可能)浏览器厂商提供。在用户订阅并且没有(大概)打开站点后,可能会收到推送消息。//在client部分,worker是注册到serviceWorker.registerconstpushSubscription=worker.pushManager.subscribe({applicationServerKey:urlBase64ToUint8Array(publicVapidKey),userVisibleOnly:true})fetch('/server',pushSubscription)参数subscribe的applicationServerKey是服务生成的公钥。订阅完成后,pushSubscription中会包含分配的端点信息,即客户端接受消息的推送地址。然后需要将这个pushSubscription信息提交给用户的服务,在服务中使用相关信息来推送消息。请参考其他文章。端点在Edge中是https://wns2-sg2p.notify.wind...,在Chrome中是谷歌的gcm地址,有一个众所周知的连接不上的问题。如果需要使用浏览器的网页推送功能,需要向厂商申请,需要进一步研究。同步我们尝试其他方式。sync顾名思义用于同步。客户端代码需要发起一个同步注册:worker.sync.register('sync-name')注册的worker会触发sync事件。这时worker需要通过轮询、长链接等方式获取消息,调用通知进行展示。示例代码如下://worker.jsself.addEventListener('sync',(event)=>{functionpoll(){fetch('/data-server/').then(res=>{self.registration.showNotification('Messagefrompoll',{body:res.data})setTimeout(()=>{poll()},30*1000)})}poll()}看到这里,你可能会想为什么需要要同步轮询,为什么不直接在worker中轮询呢?实践发现service-worker在tab或者浏览器退出后很快就会被回收,然后停止执行,这个时间会十几秒至多,event.waitUntil接受一个promise,它会告诉事件派发器事件还在进行中,并通知浏览器阻止工作线程的执行终止,以延长工作线程的生存时间,我们把poll包装成一个不执行resolve的promise来延长存活时间,测试显示关闭浏览器或tab后,在mos执行3分钟左右t(同时出现worker在5分钟后返回的现象,激活了一轮,15分钟后进行了另一轮,没有后续观察,但同时,用于的id民意调查中的标记已更改)。没有达到长期生存的效果。