PWA 实践经验 webpush

  • Z时代
  • 2024-01-10
  • 分类：综合

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)，可以让客户直接更新到新的版本，或者可以缓存资源，让用户下次秒开你的新版本内容。知晓原理后慢慢打磨产品，推送的脑洞还是挻大的。

以上是 PWA 实践经验 webpush 的全部内容， 来源链接： utcz.com/z/264636.html

回到顶部