不常用的浏览器 API —— Push

453 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第25天,点击查看活动详情

这一节来看一下 Push API,这个 API 也是主要用于 PWA 环境,因此了解的人也比较少,下面就来看一下相关的内容。

Push API 提供了接收服务器推送消息的能力,可以给在后台的用户推送异步的通知和更新,从而让用户能更及时地获取更新,带来更好的用户体验。

前面也说了 Push API 是 PWA 专用的,因为这个 API 是依赖 ServiceWorker 的,因为 ServiceWorker 是一个独立的运行线程,因此它拥有脱离页面后台运行的能力,基于此我们可以实现在后台监听服务器推送的效果。Service worker 会在必要的时候启动并接收接下来的推送消息,传递给 ServiceWorkerGlobalScope.onpush 的 event handler。该方法允许将接收到的推送消息使用在应用上,我们可以利用 showNotification 方法来进行消息的显示等。

在 PWA 中,后台消息的能力还是比较重要的,它使得 PWA 更加接近原生的 APP,给用户带来更好的原生体验,结合 PWA 自身的离线能力,我们可以把 Web APP 的应用体验做的非常好。

这里需要注意,激活一个 service worker 来提供推送消息会导致资源消耗的增加,尤其是电池,因为 service worker 在后台运行,就和 native client 的 service 类似,属于后台程序,会直接给用户带来影响的,因此浏览器对这部分有一些限制,不过这部分限制并没有完全标准化,不同的浏览器限制是不完全一致的,我们需要根据需求具体的处理。

在 server 也有很多 web-push 的实现,根据需要可以自行查找,比如 node.js 可以使用 web-push 这个 npm 包来进行相关的开发。