Skip to main content

Push Notification to the browser with Javascript

Push notification to the browser is a way to send an information message to the browser same like you experiencing in mobile Apps like Facebook or Whatsapp.

You can do so using a simple jQuery and Javascript code, Today we will only cover the Javscript part in this tutorial.

Try Demo

Ask User for notification permission

First of all we need to request for the permission to user to allow browser notification.

notification-permission

 

Initialize the notification object

If user have granted for notification, we need to initialize the notification object where we need to pass few parameters

Callback functions

You can add call back function on notification. Notification have onclick and close callback events you can use it as below. For demo I have just open the url onclick and onclose just print a log in console.

 

Wrapping all together

Try Demo

Conclusion

At the movement browser push notification will only supported in latest Chrome and Firefox.

Hardik Joshi

Hardik Joshi is Founder, Developer and Writer at eCodezone.com, He loves to write usable code for the Web and other digital sources.

  • Francesc Pineda Segarra

    Not working using Chrome on Android

    • Hey @francescpinedasegarra:disqus sorry for the delay, It will not work on mobile browsers. At the movement this features only supports on few browsers.

  • Pingback: Ciekawostki | Wiadomości o technologiach IT()

  • Pingback: Różności | Wiadomości o technologiach IT()

  • i thought this is an article about browser push notifications. it clearly is not. when i read „browser push notification“ i think about a construct made of a background service worker plus notifications. (facebook has this for example)

    • Hey @GottZ:disqus Yes this article is about browser Push Notification like Facebook and other morden website uses for notification. Do you find any difficulties here. Let me know if I can help you here.

    • Sorry to say but I didn’t removed your comment, I newer do! I try my best to explain, I have also commented that Do you find any difficulties here. Let me know if I can help you... you should rise question if you feel so. This article is about Browser/Web push notification with JavaScript, I have also posted demo and download link for this article to try. I would welcome your any questions and would like to clear any misunderstandings.

      Thanks.