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?

Answer 1

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

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).

Answer 3

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/