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.
Download Script 
Live DemoNote: 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();
}
});
{
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');
};
}
}
{
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"
],
......
......
......
];
[
"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" />
<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" />
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>
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>
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
ReplyDeleteLet me check notification time limit settings.
DeleteThanks :)
ReplyDeleteHow lucky i m to visit your site,Thank you so much Sir
ReplyDeleteGreat post. Notification has some issue with FF but work perfectly in Chrome.
ReplyDeleteGreat Work ...
ReplyDeleteAdamsın Tamada ! Thanks for the sharing, good article !
ReplyDeleteExcellent
ReplyDeleteMade my day :)
ReplyDeleteDoes this work even when the user has closed my website?
ReplyDeleteGreat Tutorial !
ReplyDeleteBut in pop up should be option - button to turn off the notifications.
Thanx !
Write notification stop function here.
Deletenotification.onclose = function () {
//close function here.
};
Hey, I want to buy wall script. I need to ask some questions first...
ReplyDeleteMail me [email protected]
DeleteHello srini, can you show the notification more than 1 hour? it s possible?
Deletehow do i make the notification to display only for 5 sec
ReplyDeletesetTimeout(function(){
Deletevar 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
Hi Srinivas,
DeleteWhen 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.
an awesome script
ReplyDeletewow... its really Great.
ReplyDeleteVery Nice, Please Tell me.. It is Possible to add this script in blogger.. If yes than please tell me how?
ReplyDeleteThanks
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?
ReplyDeleteThanks
Hi..
ReplyDeleteI want to send a notification for a particular users means every users have own notifications. how it will do in your script ??
Hi, I want to know ,How Facebook is sending notification even if tab is closed?
ReplyDeleteYou always great boss :-) nice post.
ReplyDeleteCould you help the same with mobile push nodification
ReplyDeletenice article :)
ReplyDeleteI 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?
ReplyDeleteerror var title=articles[x][0];
ReplyDeleteNice example
ReplyDeleteBut 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
nice tutorial.
ReplyDeletethere is any way to show this notification when webpage or browser are not open?
Thanks
Hello Sir, very nice article. Will you please guide how to implement this example to work dynamically from database using PHP.
ReplyDeletehow to implement this in blogger
ReplyDeletehi it is not working in mobile. Please help me
ReplyDeletegod job , but i am facing a problem , when i run this code to my cellphone browser its not working.. help me for this
ReplyDeletehi that notification is not working on my crome version on firefox its work can u please give solution
ReplyDeleteThis 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.
ReplyDeletePush notifications are sent from background workers and can be displayed even if your users do not have your site open.
can someone help to set theme for this push notification?
ReplyDeleteHi, this script really work. but how i use it if the browser window is closed but user see notification? And how i send notification through php server? any idea about it?
ReplyDeleteIt is not working in Android chrome
ReplyDeleteIf I want send notification like FB friend request is this possible for this push notification code?
ReplyDeleteit is not working in chrome but it is working mozilla firefox
ReplyDeletehow to use this script to send multiple users on same time.
ReplyDeleteWorking great...
ReplyDeletehow to get notification sound?
ReplyDeleteHi,
ReplyDeleteGreat article. how can we send notification if the site is not opened.
This comment has been removed by the author.
ReplyDeletehow generate it from server end? like facebook
ReplyDeleteHi, It's not working like facebook, like when i close the tab but not logged out facebook return the desktop notifications continue but when i used this script in my website, when i load the page it's working and shows me two-three msgs then nothing shows and when i close the tab it's not working, please help me.
ReplyDeleteThanks,
Nyc Work
ReplyDeletenice script but its not working in mobile browser could you please help me to work in mobile also.thanks in advance
ReplyDelete