推送通知在现代网络上很常见。即使您的网站实际上并未打开,它们也能让您及时向用户传达信息。用户的浏览器处理传入的推送事件并使用系统 UI 界面(如 Windows 操作中心和 Android 锁屏)显示通知。
在您的网站或 PWA中实施 Web Push需要结合两个不同的浏览器 API。负责订阅和接收通知的代码使用service workers的Push API组件。此代码在后台持续运行,并在需要处理新通知时由浏览器调用。
当接收到一个事件时,服务工作者应该使用通知 API来实际显示通知。这会通过操作系统级界面创建视觉警报。
这是让 Web Push 在您的网站上运行的完整指南。我们假设您已经拥有一个服务器端组件,可以注册推送订阅并发送您的警报。
服务工作者
让我们从服务工作者开始。服务工作者有多个角色——他们可以缓存数据以供离线使用、运行定期后台同步以及充当通知处理程序。服务工作者使用事件驱动的架构。一旦被站点注册,用户的浏览器将在其订阅的事件生成时在后台调用服务工作者。
对于 Web Push,需要一个核心事件:push. 这会接收一个PushEvent对象,该对象允许您访问从服务器推送的有效负载。
self.addEventListener("push"