如何使用 Server-Sent Events 和 Safari 推送 Apple 推送提示
前言
Server-Sent Events (SSE) 是一种 Web API，它允许浏览器和服务器之间建立一种持久化的连接，从而能够实现服务器实时推送数据到浏览器。SSE 提供的数据流是单向的，只能由服务器向浏览器推送数据。SSE 的优势是可以在浏览器中使用标准的 XMLHttpRequest 对象从服务器获取数据，而不需要使用 WebSocket 进行通讯。
Safari 推送是苹果推出的一种基于 Web 推送通知的服务，它使得网站可以在用户离开网站后向其推送通知消息。苹果提供了 Web Push Notification API，使得开发者可以在 Safari 浏览器中实现推送通知功能。
在本文中，我们将结合 Server-Sent Events 和 Safari 推送，介绍如何实现基于 SSE 的 Safari 推送服务。
步骤
实现 SSE 服务
首先，我们需要在服务器端实现 SSE 服务。下面是一个基本的 SSE 服务器的实现示例（使用 Node.js）：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- ------------------- ------------------ - --------------- -------------------- ---------- -------- ---------------- ----------- ------------- ------------ --- -- ---- -------------- -- - -- -- --- ---- ----- ---- - - ------ ------------- ----- ---------------- -------- ------- ------- -- -- ---------------- -------------------- -------------------- -- ------ -- ---- ----------------------------------- -- -- - ---------- -- ------- ----------------展开代码
上述代码创建了一个 HTTP 服务器，并通过 res.writeHead 方法设置了响应头，指定了要发送的数据格式和编码等。接下来，我们定义了一个发送数据的定时器，并在定时器中构造了 SSE 数据格式进行发送。其中，事件名称和消息体都是自定义的。最后，通过 req.connection.addListener 方法实现了在浏览器窗口关闭时，关闭 SSE 服务器与浏览器的连接。
在浏览器中实现 SSE 客户端
SSE 的客户端实现比较简单，下面是一个基本的 SSE 客户端的实现示例：
-- -------------------- ---- ------- ----- ----------- - --- -------------------------------------- --------------------- - --------------- - ------------------------------------ -- ------------------------------------------ --------------- - ------------------------------------ ---展开代码
上述代码通过创建一个 EventSource 对象，指定 SSE 服务器的地址来创建 SSE 客户端。接下来，我们可以通过 onmessage 和 addEventListener 方法分别处理服务器推送过来的消息。
实现 Safari 推送
通过 SSE 实现了实时向浏览器推送数据后，下一步就是将其转化为 Safari 推送通知。
Safari 推送通知需要浏览器支持 Web Push Notification API 来实现。由于最新版本的 Safari 浏览器已经支持 Web Push Notification API，因此我们只需要使用该 API 来生成通知消息即可。
下面是一个基本的 Safari 推送服务的实现示例：
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- --- - ---------- ----- --------- - ---------------------------- ----- ----------- - - ------- ---------------- --------- - -- -------------------------- --- --- - -------------- ----- - ---- - ------------ ---------- ------- -- ------- - - -- --------------------------- --------------------------- ------------------------------- --------- ----- ---- -- --- ---- -- ------------------------ -------------------------------- ------------ ------------ -- -- -- --- --------- ----------------- ----- ---- -- - -- -- --- ----------- ----- ------- - ----------------- ----- ------- - ---------------- ------ ------------- ------- -------- ------- --- -- ---------- ----------------------------------------------- -------- -------- -- - ---------------------------- ---------------- -- -------------- -- - ----------------- --------- ------- -------------------- --- --- -----------------展开代码
上述代码使用 web-push 包来初始化 Push 服务，并通过 Express 框架搭建了一个简单的 HTTP 服务器。在 app.post('/push') 回调函数中，我们接收 SSE 服务器推送过来的消息体，并根据需要生成推送通知消息的标题和内容。
最后，通过调用 webPush.sendNotification 方法向浏览器推送消息。
实现 Safari 推送的前端页面
最后是前端页面的实现。在这里，我们需要使用声明式订阅 SWE（Service Worker Extension）和注册 Service Worker。下面是一个基本的前端页面的实现示例：
-- -------------------- ---- ------- ------- --------------------- ---------------------------------------- -------- --- -------------- - ----- -------- ----------- - -- -- ------- ------ ----------------------------------------- -------------------- -- - -------------- - ------------- -- ----- --- ------ -------------------------------------- ---------------- ----- --------------------- ---------------------------------- --- -- -------------------- -- - -- ----- ------------ --------------------------- --- - -------- ----------------------------------- - -- ------ - ---------- ----- ------- - ------------- - ------------------- - -- - --- ----- ------ - ------------- - -------- --------------- ---- -------------- ----- ----- ------- - -------------------- ----- ----------- - --- --------------------------- --- ---- - - -- - - --------------- ---- - -------------- - ---------------------- - ------ ------------ - -------- -------------------------- - -- ----- ------------ ----- ------- - - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ------------- ------------- -------- ------- ------- -- -- ----------------------------------- -------- ---------------- -- - ----------------- ---------- ---------- -- -------------- -- - ----------------- --------- ------- --- - ---------展开代码
上述代码中，我们首先在页面上添加了一个“Subscribe”按钮，然后通过调用 navigator.serviceWorker.register 方法注册了 Service Worker。接下来，我们使用 swRegistration.pushManager.subscribe 方法在客户端完成声明式订阅 SWE，然后将生成的 subscription 通过 sendToServer 方法发送到后端。
总结
本文介绍了如何结合 Server-Sent Events 和 Safari 推送，实现了基于 SSE 的 Safari 推送服务。首先，我们实现了 SSE 服务器，通过 res.write 方法将 SSE 数据发送到浏览器。然后，通过 EventSource 对象在客户端上监听 SSE 服务器发送过来的消息。接下来，通过苹果提供的 Web Push Notification API，我们在后端实现了 Safari 推送服务。最后，在前端实现了注册 Service Worker 和声明式订阅 SWE，最终我们实现了完整的 SSE + Safari 推送的示例。
参考文献
- Server-Sent Events 教程
- Safari 推送通知介绍
- Web Push Notification API 文档
- Web 开发中的推送通知
- web-push npm 包介绍
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba4f2dadd4f0e0ff2d7234
