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.

 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>

 

Credit to 9lessons