How do we display browser notifications from a web application?

In this blog, I will discuss how to display browser notifications from the web application. You can push notifications for event reminders, message information, etc.

Browser desktop notification system
Using this, you can push notifications for event reminders and message information like WhatsApp to desktop users in realtime from your web project. Very few lines of JavaScript code are needed.

Step 1 - Show Permission for Notification

Add the below JavaSscript code in the webpage.
  1. document.addEventListener('DOMContentLoaded', function() {
  2. if (Notification.permission !== "granted")
  3. {
  4. Notification.requestPermission();
  5. }
  6. });

Notification.requestPermission() will give an alert for notification permission.

Step 2 - Custom Notification function
  1. function customnotify(title,desc,url)
  2. {
  4. if (Notification.permission !== "granted")
  5. {
  6. Notification.requestPermission();
  7. }
  8. else
  9. {
  10. var notification = new Notification(title, {
  11. icon:'http://Your_Website.com/logo.png',
  12. body: desc,
  13. });
  15. /* Remove the notification from Notification Center when clicked.*/
  16. notification.onclick = function () {
  17. window.open(url);
  18. };
  20. /* Callback function when the notification is closed. */
  21. notification.onclose = function () {
  22. console.log('Notification closed');
  23. };
  25. }
  26. }

Now, the notification is set up on a web page. You can call any notification from the webpage by just calling the customnotify function.

We can call this function like this:

customnotify('Bhavdip Talaviya','enter your description hear','http://www.bhavdip.somee.com')
Thanks for reading.