如何处理网站和 PWA 中的 Web 推送通知

推送通知在现代网络上很常见。即使您的网站实际上并未打开，它们也能让您及时向用户传达信息。用户的浏览器处理传入的推送事件并使用系统 UI 界面（如 Windows 操作中心和 Android 锁屏）显示通知。

在您的网站或 PWA中实施 Web Push需要结合两个不同的浏览器 API。负责订阅和接收通知的代码使用service workers的Push API组件。此代码在后台持续运行，并在需要处理新通知时由浏览器调用。

当接收到一个事件时，服务工作者应该使用通知 API来实际显示通知。这会通过操作系统级界面创建视觉警报。

这是让 Web Push 在您的网站上运行的完整指南。我们假设您已经拥有一个服务器端组件，可以注册推送订阅并发送您的警报。

服务工作者

让我们从服务工作者开始。服务工作者有多个角色——他们可以缓存数据以供离线使用、运行定期后台同步以及充当通知处理程序。服务工作者使用事件驱动的架构。一旦被站点注册，用户的浏览器将在其订阅的事件生成时在后台调用服务工作者。
对于 Web Push，需要一个核心事件：push. 这会接收一个PushEvent对象，该对象允许您访问从服务器推送的有效负载。

self.addEventListener("push"