Difference between Notifications API and Push API from Web perspective

Question

What is the difference between Chrome Notifications API and the Push Notification API when developing Web notifications. When each one should be used and how are they different?

Bannerman

Answer 1

NOTIFICATION API The Notifications API lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background. This article looks at the basics of using this API in your own apps.

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API

PUSH API The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. https://developer.mozilla.org/en/docs/Web/API/Push_API

Check these links for more info: https://www.w3.org/TR/push-api/ https://www.w3.org/TR/notifications/

Frobisher

So both works when browser is active or opened, am i right ? – Doak

so is the difference is that notification API does not allow user interaction where Push APi allows users to click and interact with the pushed messgae? – Barbarbarbara

I understand that Notification is something from the browser to the OS (popup on android, windows, etc.) where Push is something from a server to the browser (updated information, message, etc...). No direct link with the activity of the browser nor the user. – Satanic

Obviously, the notification API requires the the browser to be open, since the notification API is a client-side API. Behavior of push notifications varies by browser. Some browsers can display push notifications even if the browser is closed. Currently, this is supported on Microsoft Edge and Apple Safari (Safari uses the Apple Push Notification Service, rather than the Push API). – Anguished

Answer 2

It can be confusing, but if I get this right, looking for a clear answer myself, it is like this:

Notifications API = used to send notifications when the user IS ON your site/app, even when idle or in the background.

Push API = used to send notifications when the user IS NOT ON your site/app at the moment.

Browser compatibility

• https://caniuse.com/notifications
• https://caniuse.com/push-api

NOTE: For Safari on macOS Apple has it's own push notification API: https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/Introduction/Introduction.html

Safari on iOS still doesn't support any of the two APIs (Feb 2021).

Lemar

This is not exactly correct. Push API sends information from a server to a Service Worker in the background of a system. The service worker, however, does not need to show any notifications just because it received a push. So in order to show a notification when your site/app is in the background, you need to both receive a Push as well as display a Notification. – Camel

Answer 3

Notification API
System notification fired by the browser.

Push API
System notification fired by a remote server or by the browser itself.
This API makes use of the browser's service workers.

 

The "power" of Push API comes if you need notifications from an external service.
Both API's also work in background.

 

*Credits to: @yota, MDN Push API, MDN Notifications API

Katabatic