如何从零到一实现个完整webPush推送服务

如何从零到一实现个完整webPush推送服务

2024-12-25 14:11

经常做海外项目或者做过海外项目的伙伴应该多多少少听过 webPush 也就是：消息推送通知，它的优势在于提高用户参与度、通过向用户发送实时通知，可以提醒他们查看新内容或完成某些操作，同时支持离线通知，即使在用户的设备离线或者浏览器未打开的情况下，也可以通过Service Worker在设备重新连接或浏览器打开时发送通知。

故此国外很多的头部网址都有集成了此功能，向大家比较了解的可能就是：YouTube、twitter、facebook等，下面是我简单截了一下twitter推送消息，供大家参考：

大家可能有个疑问？为什么这么好的功能在国内做的很少呢？

技术限制：在国内，由于网络环境和网络规则的特殊性，使用 web push 技术的应用受到了一定的限制。例如，一些浏览器可能不支持或者只部分支持 web push 功能，这就限制了这项技术的普及和使用。
网络安全：web push 技术需要浏览器与服务器之间建立长连接来实时传递推送信息，这可能会涉及到一些网络安全风险。为了保护用户隐私和数据安全，国内政府对于个人信息保护有较为严格的监管要求，这也对 web push 的使用产生了一定的影响。
用户习惯：在国内，短信和APP推送已经成为用户获取信息的主要方式。相比之下，web push 相对较新，用户对于这种推送方式的接受度和使用习惯还不够普及。
推广力度不足：由于种种原因，国内对于 web push 的推广力度相对较小。相比之下，国外市场对于 web push 的应用更加广泛，也更容易找到相关的教程和案例。

分析完了以上的利弊相信大家也对这个技术有些许好奇 WebPush到底是个什么呢？别急，下面让我带领大家一起开始。

当你文章阅读到此的话我已经假定你的有PWA 和Service Worker的基本知识，这篇文章是之前《两句话带你入门webPush》的延伸，感兴趣可以花5分钟阅读一下~

Web Push（网页推送）是一种在Web浏览器中向用户发送实时消息的通信技术。它允许网站向用户发送通知，即使用户没有打开或使用网站。当用户同意接收通知后，网站可以通过Web Push服务向用户的设备发送推送消息，这些消息将显示在用户的操作系统、浏览器或移动设备上，以吸引用户的注意并提供实时信息。

Web Push技术基于浏览器提供的Push API和推送服务提供商（如Google的FCM和Mozilla的Push Service）的支持。通过Push API，网站可以向用户的设备注册并请求发送推送消息。

Web Push是一种允许服务器向用户的设备发送通知消息的技术，即使在用户没有打开应用的情况下也可以发送。这种技术主要依赖于Service Worker：一个在浏览器后台运行的脚本，可以在用户没有打开网页的情况下响应事件。

主要优势包括：

提高用户参与度：通过向用户发送实时通知，可以提醒他们查看新内容或完成某些操作，从而提高用户的参与度和活跃度。
提供更好的用户体验：用户可以选择订阅或取消订阅通知，这意味着他们只会收到他们感兴趣的通知，从而提供了更个性化的用户体验。
支持离线通知：即使在用户的设备离线或者浏览器未打开的情况下，也可以通过Service Worker在设备重新连接或浏览器打开时发送通知。
跨平台：Web Push技术支持多种浏览器和操作系统，包括Chrome、Firefox、Opera等，可以在桌面和移动设备上使用。

需要注意： 虽然Web Push有很多优势，但也有一些限制，经过测试在iOS设备上的Safari浏览器中，目前还不支持Web Push通知。

在整个push的过程中其实有三个角色分别是：

浏览器： 就是我们的客户端
Push Service：专门的Push服务，你可以认为是一个第三方服务，目前所有接入推送消息的都要遵循web-push的协议
后端服务：这里指的是Node服务

整理实现如下：

通过上图我们简要整理一下推送消息的流程如下：

在浏览器判断是否支持serviceWorker对象；
注册serviceWorker通过pushManager.subscribe在浏览器弹出，询问用户是否允许接受消息通知注意：用户如果选择拒绝，不可以重新调起
点击允许会生成一个subscription（订阅）的标志信息，保存到服务端，用来发push给当前用户
服务器通过接收的subscription（订阅）信息通过 web-push 集成包向 FCM 发送消息
FCM（Firebase Cloud Messaging）会下发到对应的浏览器，
浏览器触发Service Worker的push事件，向用户弹出弹出消息

需要注意的是： 推送消息仅支持HTTPS或者localhost

Web 推送要求从后端触发的推送消息通过Web 推送协议完成，如果您想通过推送消息发送数据，则还必须根据Web 推送消息加密规范对该数据进行加密。该模块可以轻松发送消息，并且还将处理对依赖 GCM 进行消息发送/传递的浏览器的遗留支持。

安装

生成秘钥

用例

通过web-push返回唯一的标识符

endpoint： 推送服务端点，即推送服务的地址。通常是一个唯一的URL，用于向推送服务发送推送消息。
keys.p256dh： 这是一个公钥，由客户端生成并发送到服务器。服务器使用此公钥加密推送消息，然后将加密的消息发送回客户端。客户端使用其私钥解密这些消息。这个公钥是使用椭圆曲线 Diffie-Hellman (ECDH) 密钥交换协议生成的，用于确保只有拥有相应私钥的接收方才能解密和阅读消息。
keys.auth： 这是一个密钥，由客户端生成并发送到服务器。它用于生成一个加密密钥和一个认证密钥。这两个密钥都用于加密和解密推送消息。加密密钥用于加密消息内容，而认证密钥用于生成一个 HMAC，以确保消息在传输过程中没有被篡改。这个密钥并不直接用于加密，而是用于生成用于加密和认证的密钥。
expirationTime ： 与推送订阅关联的订阅过期时间的A （如果有），否则为 null。

说完了以上的准备条件，下面让我们实现一下整个的推送流程。基于域名的限制大家可以本地模拟或者上传到自己的FDS、阿里云的OSS中，具体以自己实际情况而定，接下来我们从三个层面进行搭建一个简易的web push 平台，分为 ：前端（消息模板）、后端（Node）、CMS

Node 版本： >=18.0.0

下图是依次是：PC（macBook）、H5（安卓）、PWA（IOS）;

TIPS: 这里可能很多人好奇为什么需要注明不同分辨率的系统，很简单：有兼容； 具体可以往下看有标题注明

经过测试：在macBook、Windows 等电脑上是不存在兼容性的，当然主要还是取决你的浏览器的版本，在移动端中Android表现良好不管是通过chrome浏览器打开还是生成PWA都是支持，但是在IOS中只能在PWA中支持，这点需要注意。

为了演示，图中使用的是以浏览器唯一的标识符将当前的浏览器信息进行了MD5加密，实际在项目中可能需要浏览器指纹来判断唯一性、或者生成业务的唯一的标识符等。

项目框架采用Vite搭建，相关安装请参考Vite官方文档，相关依赖如下：

编写一个简单的模板文件用于接收push 消息，详细的代码如下：

新建sw文件，用于接收服务器推送的消息，需要注意：是推送的push属于浏览器的行为，在Network可看不到，可以通过浏览器的调试行为来进行mock，如下图

对应的就是在sw的push中获取的对象，在执行点击卡片的时候需要传递的参数可以通过的形式传递过来。mcok数据如下，

详细代码如下：

服务器的搭建采用的是nest-cli，想要深入了解的同学可以参考

安装mysql依赖：

项目目录如下：

在当前push的模板中提供了以下四个接口：

http://localhost:3000/push/get-keys : H5模板：获取公钥接口
http://localhost:3000/push/push-endpoint : H5模板：推送浏览器凭证接口 :
http://localhost:3000/push/notice-users : CMS模板：查询库有多少用户进行允许了消息通知
http://localhost:3000/push/config-message : CMS模板：对用户进行发送配置消息，同时更新数据库信息

通过定义的方式进行mysql的增删改查来完成针对某个用户的精确推送，代码如下：

链接数据库

数据库名称：

创建表结构

表名：

数据库一览

技术栈这边根据自己喜欢搭建满足下图选项即可，我这里使用的是vue-cli直接生成，通过下图可以看到在「发送用户」里面的数据就是由进行查询，发送的时候使用进行发送通知

很多时候我们需要在接收到消息或者点击消息等一些动作进行两端的通信，比如做一些数据埋点等操作，在Service Worker中提供很多方法，这里我简单说两种：clients 、new BroadcastChannel

需要注意：BroadcastChannel虽好，但是容易造成页面的longTask 和BFCache失效，相关可以参考

相信大家看完通信方式会有一个疑问❓如果当浏览器关闭的时候sw还在运行但是还能收到push推送的消息，那么如果进行一些数据上报怎么办？这里有一种方式就是用fetch来进行接口上传，通过Node或者业务的服务器进行接收达到数据收集的效果，

当然方法绝对不止这一种，有更多的方案欢迎大家留言探讨，下方是模拟实例代码

service-worker.js

需要注意： Safari的版本是 iOS 操作系统的一部分，因此其版本与您当前拥有的 iOS 版本相同。

有多种问题可能会导致推送服务返回非 201 响应代码。下面列出了 HTTP 状态代码及其与 Web 推送的关系。

状态代码说明429请求数量过多。您的应用服务器已达到推送服务的速率限制。服务的响应应包含“重试”标头，以指示在多长时间后可以发出其他请求400请求无效。您有一个标头无效或格式不正确。404未找到。在这种情况下，您应该从后端删除 PushSubscription，并等待机会重新订阅用户。410不见了。订阅不再有效，应从您的后端中移除。这可以通过对“PushSubscription”调用“unsubscribe()”来重现。413载荷大小过大。推送服务必须支持的最小载荷为 4096 字节（或 4kb）。大于该值就会导致此错误。

事实上在MAC上很多浏览器的消息通知都是默认关闭的，需要手动打开如图所示：

系统偏好设置 => 通知=> firefoxChrome

Chrome浏览器 => 头部的三个点=> 设置 => 通知「打开全部的通知」=> 网站 => 设置当前弹出形式

答：Icon 配置的链接地址要求的尺寸是 256*256 ；另外可以使用一个在线生成PWA的工具

答：不支持，如果需要推送消息，可以使用APP的内置方法进行发送。

相关资料

pushpad.xyz/blog/can-i-…
pushalert.co/documentati…

答：没找到相关的资料，但是实际在设置的时候确实不起作用，然后找了GPT问了问得到了验证。

确定浏览器是否开启了隐身模式、或者浏览器是否安装了拦截广告消息等插件、在部分Android设备有“请勿打扰”模式和“无干扰”模式。 如果您启用了其中任何一个，您将不会收到任何通知。

平台支持扩大：随着Web Push技术的成熟和普及，越来越多的平台和浏览器开始支持该功能。目前，主流的浏览器如Chrome、Firefox、Safari等都已经支持Web Push，未来更多的浏览器可能会加入支持行列。这将促使更多网站和应用采用Web Push来与用户进行沟通和互动。
个性化和智能化：未来的Web Push通知将越来越注重个性化和智能化。通过分析用户的兴趣、行为和偏好等数据，系统可以向用户发送更加精准和有针对性的推送通知，提供更好的用户体验。同时，结合人工智能和机器学习等技术，Web Push通知可以更好地理解和适应用户的需求，提供更加个性化和智能化的推送服务。
跨平台和跨设备：未来的Web Push技术可能会越来越支持跨平台和跨设备的消息推送。用户可以在不同的设备上接收和管理推送通知，无论是在手机、平板还是电脑上，用户都能够及时获取到重要的消息。这将极大地提高用户的便利性和可用性。
安全性和隐私保护：Web Push通知涉及到用户的个人信息和隐私，未来的发展趋势将更加注重安全性和隐私保护。技术和标准将不断完善，以确保用户的数据得到有效的保护，并防止被滥用和泄露。同时，用户对于隐私权的关注也会促使厂商和开发者更加注重用户数据的安全和合规性。
更多应用场景和创新：Web Push通知不仅仅局限于一般的消息推送，未来可能会在更多的应用场景中得到应用和创新。比如，在电子商务领域，可以通过Web Push通知来实现订单状态更新、促销活动提醒等功能；在新闻媒体领域，可以通过Web Push通知来推送新闻资讯、热点话题等内容；在社交网络领域，可以通过Web Push通知来提醒用户有新的消息、评论或者关注等。未来，随着技术的不断进步和应用场景的拓展，Web Push通知将会发挥更大的作用。

总的来说，未来Web Push的发展趋势将会更加多元化、智能化和个性化。随着技术的不断进步和用户需求的不断变化，Web Push将成为用户与网站、应用进行互动和沟通的重要手段之一。