PWA 实践经验 webpush

Question

webpush 也是 PWA 的一个十分关键的功能，推送背后的原理涉及三个实体： 客户端，业务服务器，google推送服务器（FCM）。相关资料可以参考我建好的一个 repo https://github.com/p2227/web-push-demo

数据流

结合我的 demo，一个推送（VAPID 形式）的数据流是这样子的

• 业务服务器事先生成一对公私钥（VAPID），VAPID 需要持久化存储的，如果丢失，则会失去之前订阅的所有用户。重启服务器不需要重新生成 VAPID
• 客户端检查是否已经订阅(serviceWorkerRegistration.pushManager.getSubscription())，如果没有，则向业务服务器获取公钥（第一次订阅时会提示需要显示通知的权限）。
• 客户端把公钥作为参数，通过serviceWorkerRegistration.pushManager.subscribe()去跟 FCM 进行订阅，订阅成功获得 endpoint信息,这个信息的格式大概如下

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/cqn7Z6-nFxI:APA91bEJIIwrR4M0jkv-K66hIveoHooRhXor42h39ku-m0SykHxxxxUg16CEpn0U3vM5UAFlSn9LfjXJPYpTYd2MzWBnCD_tgrJ509HvL08N2emFhw8-PI-azM2DubqHHuwCLhn-1D7TqFZCEHmtRs45z0X76g",
  "expirationTime": null,
  "keys": {
    "p256dh": "BBeeh1o0SbHbc7-LaQvxxxxnqkip4moubTx9KcBeUotXzcTBSWY1svXOPVM7Ew2W12JEOMBSgsezLUJn3v5E",
    "auth": "hiK1U5XwDUbTmxxxRtOow"
  }
}

• 客户端 把 endpoint 信息发送给业务服务器存储，以后这个信息是发送订阅的唯一标记。
• 当业务服务器想发送推送时，会把endpoint信息和推送的内容发送给FCM，这时候客户端就会收到一个推送，触发推送事件，而这个推送要不要显示通知，由客户端sw的代码决定。
• 如果 客户端 是安卓手机，则手机上需要安装google service framework，iPhone目前还没实现，但到时候推送服务器肯定会换成APNS之类的

推送的脑洞

一个推送除了传统地显示在客户端，吸引用户点击以外，还可以做更多的事情。结合 webpush，当一个推送到达客户端时，会触发 sw 的 push 事件，可以通过 event.data 获得具体推送的内容。想象一下如果你刚发完版，上线了新内容，则可以发送一条特殊的推送，这条推送可以让客户端后台静默更新资源（通过 postMessage 更新，sw不能直接操作dom)，可以让客户直接更新到新的版本，或者可以缓存资源，让用户下次秒开你的新版本内容。知晓原理后慢慢打磨产品，推送的脑洞还是挻大的。