32

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?

riman
  • 347
  • 3
  • 7

2 Answers2

21

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/

Syed Junaid Yousuf
  • 354
  • 2
  • 13
  • 1
    So both works when browser is active or opened, am i right ? – Shaiju T Jul 22 '16 at 13:05
  • 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? – jasan Aug 02 '16 at 17:28
  • 8
    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. – yota Aug 18 '17 at 14:18
  • 1
    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). – Brian Sep 20 '18 at 18:32
1

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

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

Johan
  • 19
  • 3
  • 1
    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. – Michael Liu Feb 10 '22 at 10:05