当今时代，应用需要与用户互动才能加强用户黏性并避免用户流失，虽然我们可以在用户离开后通过邮件等方式来发送一些有价值的信息，但这并不能完全引起用户的注意，且无法与应用进行互动。这正是推送通知所要解决的问题，它最大的特点是即使没有打开应用（或浏览器），用户依旧能够收到通知内容，并通过点击通知进入应用进行事务处理。这种类似原生应用的体验为加强互动体验并保证用户留存提供了可能，也必将成为颠覆 Web 的入口，本章我们将一起探讨它的基本使用。
# 基本流程
+-------+ +--------------+ +-------------+
| UA | | Push Service | | Application |
+-------+ +--------------+ | Server |
| | +-------------+
| Subscribe | |
|--------------------->| |
| Monitor | |
|<====================>| |
| | |
| Distribute Push Resource |
|-------------------------------------------->|
| | |
: : :
| | Push Message |
| Push Message |<---------------------|
|<---------------------| |
| | |
@前端进阶之旅: 代码已经复制到剪贴板
上图摘自：tools.ietf.org/html/draft-…
如图所示，推送通知由三部分组成：
UA：客户端。Push Service：一般由浏览器服务商提供，比如 chrome 和 firefox 自己的 Push Service。Application Server：服务端，开发者自己提供。
其工作流程为：
Subscribe：浏览器通过询问（如下图）的方式让用户选择是否允许显示通知，如允许则向Push Service发起订阅请求，订阅成功后返回 PushSubscription 对象。
Monitor：订阅成功后，Push Service将保持与客户端的联系，主要作用是将服务端推送的消息发送到客户端。Distribute Push Resource：订阅成功后，客户端需要将PushSubscription对象中的验证信息发送给服务端，并在服务端进行保存。Push Message：服务端推送的消息并不是直接发给客户端的，而是发给Push Service，后者对消息进行校检后，再将消息推送给客户端。
以上便是推送通知的工作流程，由于使用过程中我们基本上不会对
Push Service进行干预，因此接下来我们仅对客户端以及服务端的使用进行阐述说明。
# 订阅通知
# 客户端
上文我们讨论了，使用推送通知的第一步便是订阅，其中客户端主要代码如下：
<script>
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding).replace(/\-/g<
