捕获 Web 推送通知的大图

介绍

由于计划在 iOS Safari 上支持推送通知，因此我借此机会研究了 Web 上的推送通知。
在学习网络推送通知的过程中，觉得最好了解一下网络推送通知的机制和全貌，所以写了一篇文章。

整体图

Push 通知的整体图如下。

订阅通知并保存用户

如图 1 至 6 所示。

这是您需要的：

1. 获取通知权限
2. 推送订阅获取对象
3. 已获得推送订阅将对象保存到自己的数据库

   1. 获得通知权限

   通知 API向用户请求通知权限。

   • Notification.requestPermission() - Web API | MDN

   2.推送订阅获取对象

   推送 API - Web API | MDN订阅推送服务。
   PushSubscription 对象包含以下数据。

   示例 PushSubscription 对象

   {
     "endpoint": "https://fcm.googleapis.com/fcm/send/c1KrmpTuRm…",
     "expirationTime": null,
     "keys": {
       "p256dh": "BGyyVt9FFV…",
       "auth": "R9sidzkcdf…"
     }
   }
   

   • PushManager.subscribe() - Web API | MDN

   3. 获得推送订阅将对象保存到自己的数据库

   保留2. Push Subscriptionオブジェクトを取得 获取的数据，因为它是发送推送消息时需要的。

   发送推送消息

   如图 7 至 9 所示。

   根据持有的推送订阅对象，通过推送服务请求推送消息。
   推送服务接收到的推送消息会排队并发送到目标设备。

   请注意，对推送服务的请求需要加密和签名。
   (https://github.com/web-push-libs/图书馆可在

   接收推送消息并将其显示为通知

   当收到推送消息时，Service Worker 的推送事件点燃。
   ServiceWorkerRegistration.showNotification()将收到的推送消息显示为通知。

   另外，如果您打开通知通知点击事件点燃。

   最后

   粗略地说，我写的是大局。
   由于这只是一个整体形象，如果遗漏了一些重要的点，请原谅我。

   希望对学习网络推送通知有所帮助。

   参考文献

   • 推送通知概述 - web.dev

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308629513.html