What is the difference between Push API and Server Sent Events?

Push API and Server-Sent Events (SSE) are both technologies used in modern web development to enable real-time communication between servers and clients. Each has distinct characteristics and application scenarios, and I will outline their primary differences below:

1. Communication Method

Server-Sent Events (SSE):

• SSE is unidirectional communication, supporting only data transmission from the server to the client.
• The client establishes an HTTP connection to the server and maintains it open, allowing the server to push data to the client through this single connection.

Push API:

• Push API enables bidirectional communication, allowing both the server and client to send messages.
• It relies on the Web Push protocol and Service Workers, where the service worker operates in the background, enabling push notifications even when the user is not actively viewing the website.

2. Use Cases

Server-Sent Events (SSE):

• Suitable for scenarios requiring real-time updates from the server, such as stock price updates, news feeds, or live statistics.
• Due to its design supporting only a unidirectional data stream from server to client, it is primarily used for frequently updated data displays.

Push API:

• Suitable for notifying users when events occur on the server, even if the user is not currently viewing the website, such as email notifications or new message notifications in chat applications.
• Push API can be considered a more 'global' notification method, generating system-level notifications on the user's device.

3. Browser Support

• Server-Sent Events (SSE) is supported in most modern browsers but not in Internet Explorer.
• Push API has more limited support, particularly not supported in Safari on iOS at present.

4. Implementation Complexity

• Server-Sent Events (SSE) implementation is relatively straightforward; the frontend only needs JavaScript to listen for an event source, and the backend continuously pushes data.
• Push API requires integration with Service Workers, making implementation more complex as it involves handling subscription logic, user permission requests, and managing background service worker threads.

Examples

Server-Sent Events (SSE) Example:

Frontend code:

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

Backend code (Node.js example):

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);
});

Push API Example:

Frontend code (Service Worker):

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

Backend code (using Web Push library):

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

The above outlines the main differences between Push API and Server-Sent Events (SSE).