Display Browser Notifications from Web Application
Wall Script
Follow Me:
Monday, November 30, 2015

Display Browser Notifications from Web Application

Browser desktop notification system, using this you can push notifications for event reminders, message information like whatsapp to desktop users in realtime from your web project. Very few line of JavaScript code, that can help you to interact with browser notification system. I have implemented this for 9lessons.info, you will find a most popular article notification for every 3 minutes. Take a quick look a the live demo.

Display Browser Notifications from Web Application


Download Script     Live Demo

Note: Try this demo with Chrome and Firefox

Start Browser Notification
This code will initialize the browser notification system, read more about Vanilla JS(Plain JavaScript)
document.addEventListener('DOMContentLoaded', function ()
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

});

Push Notification
This function will help you to push notification data, here you have to modify icon URL. You can pass title, description and URL values.
function notifyBrowser(title,desc,url)
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else
{
var notification = new Notification(title, {
icon:'http://YourWebsite.com/logo.png',
body: desc,
});

/* Remove the notification from Notification Center when clicked.*/
notification.onclick = function () {
window.open(url);
};

/* Callback function when the notification is closed. */
notification.onclose = function () {
console.log('Notification closed');
};

}
}

Firefox mozilla notification documentation

Demo Array
The array contain most popular articles on 9lessons.info
var articles = [
[
"Vanilla JS Browser Default Java Script.",
"http://www.9lessons.info/2015/09/vanilla-js-browser-default-java-script.html"
],
[
"Facebook Style Background Image Upload and Position Adjustment.",
"http://www.9lessons.info/2015/02/facebook-style-background-image-upload.html"
],
[
"Create a RESTful services using Slim PHP Framework",
"http://www.9lessons.info/2014/12/create-restful-services-using-slim-php.html"
],

[
"Pagination with Jquery, PHP, Ajax and MySQL.",
"http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html"
],
[
"Ajax Select and Upload Multiple Images with Jquery",
"http://www.9lessons.info/2013/09/multiple-ajax-image-upload-jquery.html"
],
......
......
......
];

Jquery
Contains javascipt code. $("#notificationButton").click(function(){}- notificationButton is the ID name of input button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#notificationButton").click(function()
{
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
return false;
});
});
</script>
//HTML Code
<input type="button" id="notificationButton" />

Vanilla JS
Plain JavaScript
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.querySelector("#notificationButton").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});
});
</script>
//HTML Code
<input type="button" id="notificationButton" />

SettimeOut
Contains simple JavaScript code, calls after 2 minutes. Here you can modify milliseconds values.
<script>
setTimeout(function(){
var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
var title =articles[x][0];
var desc ='Most popular article.';
var url =articles[x][1];
notifyBrowser(title,desc,url);
}, 120000); //calls every 2 minutes
</script>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


41 comments:

  1. Dear it will work if someone quite our website window and switch to other websites like gmail or facebook. still notification wil lbe shown to him/her? or they have to not close the window to show notifications? Please explain it more thnx. By the way informative article :) to get more users

    ReplyDelete
    Replies
    1. Let me check notification time limit settings.

      Delete
  2. How lucky i m to visit your site,Thank you so much Sir

    ReplyDelete
  3. Great post. Notification has some issue with FF but work perfectly in Chrome.

    ReplyDelete
  4. Adamsın Tamada ! Thanks for the sharing, good article !

    ReplyDelete
  5. Does this work even when the user has closed my website?

    ReplyDelete
  6. Great Tutorial !
    But in pop up should be option - button to turn off the notifications.
    Thanx !

    ReplyDelete
    Replies
    1. Write notification stop function here.
      notification.onclose = function () {
      //close function here.
      };

      Delete
  7. Hey, I want to buy wall script. I need to ask some questions first...

    ReplyDelete
  8. how do i make the notification to display only for 5 sec

    ReplyDelete
    Replies
    1. setTimeout(function(){
      var x = Math.floor((Math.random() * 10) + 1); /* Random number between 1 to 10 */
      var title =articles[x][0];
      var desc ='Most popular article.';
      var url =articles[x][1];
      notifyBrowser(title,desc,url);
      }, 5000); //calls every 5 minutes

      Delete
    2. Hi Srinivas,
      When I put the script in my php index file, I see an error on browser like "Notification.requestPermission(); not a function". But your browserNotifications.html works properly.
      What is my mistake here ?
      Thanks.
      Regards.

      Delete
  9. Very Nice, Please Tell me.. It is Possible to add this script in blogger.. If yes than please tell me how?
    Thanks

    ReplyDelete
  10. Hey Man how you doing? Can you explain how to do this programmatically ? I mean, if i post something in my blog right now i want to notify everyone that has the notification permission granted. Is that even possible?
    Thanks

    ReplyDelete
  11. Hi..
    I want to send a notification for a particular users means every users have own notifications. how it will do in your script ??

    ReplyDelete
  12. Hi, I want to know ,How Facebook is sending notification even if tab is closed?

    ReplyDelete
  13. Could you help the same with mobile push nodification

    ReplyDelete
  14. I want to get this notification without button click even my application is close. I want to get notification when data is change in database to another user another browser. How I can do that?

    ReplyDelete
  15. error var title=articles[x][0];

    ReplyDelete
  16. Nice example
    But this 1 is static example...can you please guide me how to use this with gcm push notification for dynamic notifications from a site to a paticular client

    ReplyDelete
  17. nice tutorial.
    there is any way to show this notification when webpage or browser are not open?
    Thanks

    ReplyDelete
  18. Hello Sir, very nice article. Will you please guide how to implement this example to work dynamically from database using PHP.

    ReplyDelete
  19. how to implement this in blogger

    ReplyDelete
  20. hi it is not working in mobile. Please help me

    ReplyDelete
  21. god job , but i am facing a problem , when i run this code to my cellphone browser its not working.. help me for this

    ReplyDelete
  22. hi that notification is not working on my crome version on firefox its work can u please give solution

    ReplyDelete
  23. This article is describing local notifications (https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API). Local notifications cannot be shown if if your site is not open.

    Push notifications are sent from background workers and can be displayed even if your users do not have your site open.

    ReplyDelete
  24. can someone help to set theme for this push notification?

    ReplyDelete
  25. it is not working in chrome but it is working mozilla firefox

    ReplyDelete

Make in India