Progressive Web App 推播通知: 网站推播通知原理开箱解密 (22)

什麽是网站推播通知

推播通知不管对 App 或是网站来说都是一种重新吸引用户来使用 App 的方法，所以目标是即使网站、App 关闭时也要能在背景接收推播。推播的目的是为了增加 engagement，在行销领域中 engagement 这个常见的指标就是指用户在网站或 APP 上的互动程度或者参与度。

怎麽使用网站推播通知

因为主要是想在背景接受推播，所以实作上是基於可以背景执行的 Service Worker 来协助相关逻辑撰写。

那实际上就是分成推送和接收两方面，在网站中推送和通知使用不同但互补的 API：

• 推送: 当服务器向 Service Worker 提供讯息
• 通知: 显示信息给用户的服务人员或网页脚本的作用

实现推送的三个关键步骤是：

1. 用户端订阅通知: 加入注册订阅逻辑
2. 服务器发送推播讯息: 透过後端叫用相关 API 向用户设备推播讯息
3. 用户端推播事件处理: 当推送到达设备时，透过 Service Worker 的 "推播事件" 来处理後续相关逻辑

底下连结提供基本的推播示范:
https://linyencheng-push-notification.herokuapp.com/

客户端订阅通知

前端在实作概念上主要是四个步骤:

1. 获得向用户发送推播消息的许可
2. 拿到服务器的 VAPID 公开金钥
3. 透过 Push API 生成一个 PushSubscription 需要的所有相关讯息，这里可以把 PushSubscription 当成用户的 ID
4. 对服务器发送订阅请求

服务器发送推播讯息

在实作後端的时候会遇到三个问题:

1. 什麽是推播服务、要怎麽执行?

收到订阅通知的请求时，将请求内容验证後就将消息推播到浏览器，若是浏览器离线，讯息就会排队储存起来等连线恢复後继续传送

2. 相关 API 传送协定和格式?

浏览器会依照符合 IETF 标准的推播协议实作，服务器原则上就是使用套件只要提供一个 endpoint 并且处理 PushSubscription 即可。

3. API 可以做到什麽程度

API 提供了一种向装置发送讯息的方法

只要从服务器发了推播消息，推播服务会将讯息保留，直到发生以下事件之一：

• 装置上线，推播服务推播讯息成功
• 讯息过期，推播服务会将从 queue 删除

用户端推播事件处理

当推播服务成功推播後，浏览器会:

1. 接收到讯息
2. 解密数据
3. 触发 Service Worker 中的事件

透过 Service Worker 浏览器可以在不打开页面的情况下去监听相关事件，所以 App 在 Service Worker 收到 "推播" 事件後，就可以执行任何背景的任务，像是偷偷传送分析资料、离线快取资源下载、显示通知等等。