0

How do some websites show notifications even if the user is not accessing the website?
For example, consider Facebook messenger. Even though the page is not open, you will get a notification. Or consider twitter. I am not a big user of twitter but I know that it also shows such notifications.

I am going to use Angular Framework for frontend and Express-Node.js Framework for backend.

Also can this be implemented in Android devices and iPhones?

What is the browser compatibility?

PS: I have a lot of questions because I have absolutely no idea how they are implemented. So please bear with me.
Thanks in advance :)

HelloWorld
  • 187
  • 1
  • 1
  • 11
  • Push notifications. Use a backend such as firebase to implement it easily. –  Apr 11 '18 at 13:41
  • [serviceworke.rs](https://serviceworke.rs/) (by Mozilla) has some great examples on how to do this. – Joery Apr 11 '18 at 13:43
  • just a clarification: If you use an App, like messenger is, It's not a webpage that sends a notification, it's the application itself. An application can contact the web, like facebook's server, to get data. Nothing to do with having a browser open or not – Kaddath Apr 11 '18 at 13:44

2 Answers2

4

You should read about service workers and push notifications.

Service workers can be used for listening to updates from a specific app's server and reacting to them. You can provoke a notification once a message was sent. Google, Amazon and other cloud services provide this kind of service. Also, you can implement one by yourself. I recommend Google for a quick win :).

Here's a great tutorial by Google: https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

Enjoy.

Pistolpete .
  • 1,118
  • 1
  • 8
  • 17
  • Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Apr 11 '18 at 13:42
-3

They use webpush notifications. The flow:

  • a Site registers a serviceworker
  • Service worker subscribes to push notifications. You can check the flow here.
  • Your browser listens to Push server. When push server notifies browser, the browser wakes up (or starts) your service worker that handles that notification.
deathangel908
  • 8,601
  • 8
  • 47
  • 81