推送 API 和服务器发送事件 SSE 之间有什么区别？

推送API（Push API）和服务器发送事件（Server-Sent Events，简称SSE）都是现代Web开发中用于实现服务器与客户端之间实时通信的技术。它们各有特点和应用场景，下面我将详细解释两者的主要区别：

1. 通信方式

服务器发送事件（SSE）：

• SSE 是单向通信，只支持服务器向客户端发送数据。
• 客户端使用一个HTTP连接向服务器发送请求，然后保持该连接开放，服务器可以通过这个单一的连接推送数据到客户端。

推送API：

• 推送API 实现的是双向通信，即服务端和客户端都可以发送消息。
• 它依赖于Web Push协议和Service Workers，其中服务工作线程在后台运行，即使用户没有打开网站也可以接收到推送通知。

2. 使用场景

服务器发送事件（SSE）：

• 适用于需要从服务器实时获取更新的场景，如股票价格更新、新闻feed、或是实时的统计信息等。
• 由于其设计仅支持服务器到客户端的单向数据流，所以主要用于更新频繁的数据展示。

推送API：

• 适用于需要在服务端事件发生时通知用户，即使用户当前没有打开网站，比如电子邮件通知、聊天应用中的新消息通知等。
• 推送API可以说是更加“全局性”的通知方式，可以在用户的设备上生成系统级的通知。

3. 浏览器支持

• 服务器发送事件（SSE） 在大部分现代浏览器中都有支持，但是在Internet Explorer中不被支持。
• 推送API 的支持情况则更加有限，特别是在iOS的Safari上目前还没有支持。

4. 实现复杂性

• 服务器发送事件（SSE） 的实现相对简单，前端只需要用JavaScript监听一个事件源，后端持续推送数据即可。
• 推送API 需要配合Service Worker的使用，实现上相对复杂，需要处理订阅逻辑、用户权限请求以及后台服务工作线程的管理。

示例

服务器发送事件（SSE）例子：

前端代码:

javascript
var evtSource = new EventSource('api/updates');
evtSource.onmessage = function(event) {
  console.log('New update:', event.data);
};

后端代码（Node.js 示例）:

javascript
app.get('/api/updates', function(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  
  setInterval(() => {
    res.write(`data: ${JSON.stringify({price: newPrice()})}\n\n`);
  }, 1000);
});

推送API例子：

前端代码（Service Worker）:

javascript
self.addEventListener('push', function(event) {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.message,
    icon: 'icon.png'
  });
});

后端代码（使用Web Push库）:

javascript
webpush.sendNotification(pushSubscription, JSON.stringify({
  title: 'New Message',
  message: 'You have a new message from John.'
}));

以上是推送API和服务器发送事件的主要区别。