0

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.

 

Desktop Notification

Desktop Notification

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

var articles = [
[
"Login with Facebook using Ionic Framework",
"http://techbloghunting.com/2017/01/28/login-facebook-using-ionic-framework/"
],
[
"Using Cordova File Transfer Plugin With Ionic Framework",
"http://techbloghunting.com/2017/01/11/using-cordova-file-transfer-plugin-ionic-framework/"
],
[
"Accessing Image Gallery using Ionic and ngCordova",
"http://techbloghunting.com/2017/01/09/accessing-image-gallery-using-ionic-ngcordova/"
],

[
"Getting URL of InAppBrowser in angularjs, Ionic",
"http://techbloghunting.com/2016/12/28/getting-url-browser-inappbrowser-angularjs-ionic/"
],
[
"The Best 10 JavaScript Frameworks for Modern Web Apps",
"http://techbloghunting.com/2016/10/15/best-10-javascript-frameworks-modern-web-apps/"
],
......
......
......
];

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>

 

downloadTBH

 

 

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.