共计 1818 个字符,预计需要花费 5 分钟才能阅读完成。
以下实际论断来自 windows 平台 Edge 浏览器与 mac 平台 Chrome 浏览器
事件
// worker.js
self.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 事件是 service worker 的生命周期事件。
event.waitUntil 办法也是很重要的办法。
install:install 事件产生在 worker 被装置或更新时,而后进入期待状态,在某个机会进入激活中,防止与旧的已激活的 worker 抵触。调用 skipWaiting 可跳过期待。
activate:activate 事件示意以后 worker 曾经正式工作。
push:push 事件是 web-push 能力的服务音讯推送事件。重点之一。
sync:sync 则是由页面客户端发动的,咱们能够用来做肯定的推送能力。重点之一。
Web Push
web push 是依赖于浏览器客户端的推送能力,由浏览器厂商提供(大略)。能够在用户订阅后,在未关上过(大略)站点的状况下收到推送音讯。
// client 局部,worker 为 serviceWorker.register 注册后的实例
const pushSubscription = worker.pushManager
.subscribe({applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
userVisibleOnly: true
})
fetch('/server', pushSubscription)
subscribe 的参数 applicationServerKey 为服务生成的公钥,实现订阅后 pushSubscription 中会蕴含调配的 endpoint 信息,即此客户端承受音讯的推送地址。
而后须要将此 pushSubscription 信息提交给使用者的服务,在服务中应用相干信息进行音讯推送,请参考其余文章。
endpoint 在 Edge 中为 https://wns2-sg2p.notify.wind…,在 chrome 中为 google 的 gcm 地址,后者有家喻户晓的连不上的问题。
如果须要应用浏览器的 web push 能力须要向厂商申请,须要进一步调研。
Sync
咱们尝试其余形式进行。
sync 如名是用来做同步的。须要客户端代码发动同步注册:
worker.sync.register('sync-name')
而后已注册的 worker 即会触发 sync 事件。此时 worker 内须要进行轮询、长链接等形式进行音讯获取,并调用告诉进行展现,示例代码如下:
// worker.js
self.addEventListener('sync', (event) => {function poll () {fetch('/data-server/').then(res => {self.registration.showNotification('来自轮询的音讯', { body: res.data})
setTimeout(() => {poll()
}, 30 * 1000)
})
}
poll()}
看到这里可能会感觉为什么须要在 sync 中进行轮询,为什么不在 worker 中间接轮询?
实际发现 service-worker 在 tab 或浏览器退出后很快就会被回收,执行进行,这个工夫最多也就 十几秒。
event.waitUntil 承受一个 promise,会通知事件散发器事件依然在进行,告诉防止浏览器终止 worker 线程的执行,为了缩短 worker 线程存活工夫,咱们将 poll 包装成一个不执行 resolve 的 promise 即可缩短存活工夫。
测试得在在敞开浏览器或页签后,最多执行了 3 分钟左右(同时,呈现了一个景象,worker 在 5 分钟后又激活了一轮,15 分钟后又一轮,后续未察看,但同时 poll 里用来做标记的 id 变了)。并未达到长期存活的成果。