Display Browser Web Push Notification in web application

The new Browser desktop notification system provide us the ability to send notification directly to your desktop from any web application. Push notification system is very important and general in mobile device to get engaged your users by sending your important notification.

It is very important to get returning user into your application. In same way now we have Browser desktop notification API to directly send real time notification to your users who have accept to receive notification. Here we are just using simple javascript API for push notification.

First of all we should check supported browser for notification API because few of the browsers are not supporting this notification API.

Implementation of Web Push Notification in web application

Then we should request for the permission to create notification from the users. So users need to allow for notification for each website.

<script>
document.addEventListener('DOMContentLoaded', function ()
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
</script>

This is the function to check the permission and send the push notification to client browse

<script>
document.querySelector("#sendNotifyMessage").addEventListener("click", function(e)
{
var outputParameter = Math.floor((Math.random() * 10) + 1);
var setTitle=articles[outputParameter][0];
var setDescription=articles[outputParameter][2];
var setUrl=articles[outputParameter][1];
sendNotificationToBrowser(setTitle,setDescription,setUrl);
e.preventDefault();
});

</script>

This is the function to create push notification data like title, description, image etc.

<script>
function sendNotificationToBrowser(setTitle,setDescription,setUrl)
{
if (!Notification) {
console.log('Desktop notification is currently not available in your browser.');
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(setTitle, {
icon:'http://discussdesk.com//view/assets/images/logo.png',
body: setDescription,
});

// After clicking notification open that target url.
notification.onclick = function () {
window.open(setUrl);
};

// This is a Callback function for notification closed.
notification.onclose = function () {
console.log('Notification closed');
};

}
}
</script>

This is the output array format. For dynamic website you need to create the same format from database.

<script>
var articles = [
["10 JQuery Plugins for Creating Dynamic Layouts","http://discussdesk.com//10-jquery-plugins-for-creating-dynamic-layouts.htm","10 JQuery Plugins for Creating Dynamic Layouts",],
["Multiple image upload and resize using AJAX","http://discussdesk.com//multiple-image-upload-and-resize-using-ajax.htm","Multiple image upload and resize using AJAX"],
["Server Side Filtering using jQuery Ajax PHP and MySQL","http://discussdesk.com//server-side-filtering-using-jquery-ajax-php-and-mysql.htm","Server Side Filtering using jQuery Ajax PHP and MySQL"],
["Autocomplete Places Search Box using Google Maps JavaScript API","http://discussdesk.com//autocomplete-places-search-box-using-google-maps-javaScript-api.htm","Autocomplete Places Search Box using Google Maps JavaScript API"],
["ReactJS And AngularJS Comparison - Which One Is The Best","http://discussdesk.com//comparison-between-reactjs-and-angularjs.htm","ReactJS And AngularJS Comparison - Which One Is The Best"],
["Submit a Form without Refreshing page with jQuery and Ajax","http://discussdesk.com//submit-form-without-refreshing-page-with-jquery-and-ajax.htm","Submit a Form without Refreshing page with jQuery and Ajax"],
["How to Create Custom Social Share Links","http://discussdesk.com//how-to-create-custom-social-share-links.htm","How to Create Custom Social Share Links"],
["Adding Google Map on Your Website within 5 Minutes","http://discussdesk.com//adding-google-map-on-your-website-within-five-minutes.htm","Adding Google Map on Your Website within 5 Minutes"],
["How to Create the Best AdWords Expanded Text Ads to Boost Your Sales","http://discussdesk.com//create-best-adwords-expanded-text-ads-to-boost-your-sales.htm","How to Create the Best AdWords Expanded Text Ads to Boost Your Sales"],
["Send Beautiful HTML Email using PHP","http://discussdesk.com//send-beautiful-html-email-using-php.htm","Send Beautiful HTML Email using PHP"]
];
</script>

This is the HTML code that have a button. By clicking this button you can send push notification.

<div>Click to send notification</div>
<a href="javascript:void(0);" id="sendNotifyMessage" class="button">Send Notification</a>
</div>

If you have any query regarding this article and demo, Please feel free to ask in comment section.