Thursday, July 20, 2017

Desktop notification in browser using JavaScript

In most of the sites have today their own desktop notification system to connect user in a large scale. So how to create a desktop notification for your site. Its very simple to generate a new notification using JavaScript, you have to write hardly 2-3 lines of code. Lets create one to generate desktop notification.

To create a new notification for user you have to follow three steps.
  1. Is the browser supports the notification feature. If not show an appropriate message.
  2. Ask user to allow the notification feature to show.
  3. Create a new notification and a click event to fire.
First lets start with whether the browser is supportable to show notification. For this we will use JavaScript Notification object to do all the operation.
 
if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.');
    return;
}

 And when the user has opened the site prompt user with an box, saying user to allow the site to show notification. For this use follow code block.

document.addEventListener('DOMContentLoaded', function () {
    if (Notification.permission !== "granted")
        Notification.requestPermission();
});

 Now create a button in the body & by clicking on that button a notification will be shown.

<button onclick="notifyMe()">
    Notify me!
</button>

Now in the script section add the Notify() method and write the following piece of code.

function notifyMe() {
    if (!Notification) {
        alert('Desktop notifications not available in your browser. Try Chromium.');
        return;
    }
 
    if (Notification.permission !== "granted")
        Notification.requestPermission();
    else {
        var notification = new Notification('Notification title', {
            icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
            body: "Here is your notification!",
        });
 
        notification.onclick = function () {
            window.open("http://asp-arka.blogspot.in/");
        };
    }
}

Here are the full code.

<html>
<button onclick="notifyMe()">
    Notify me!
</button>
<script>
    // request permission on page load
    document.addEventListener('DOMContentLoaded', function () {
        if (Notification.permission !== "granted")
            Notification.requestPermission();
    });
 
    function notifyMe() {
        if (!Notification) {
            alert('Desktop notifications not available in your browser.');
            return;
        }
 
        if (Notification.permission !== "granted")
            Notification.requestPermission();
        else {
            var notification = new Notification('Notification title', {
                icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
                body: "Here is your notification!",
            });
 
            notification.onclick = function () {
                window.open("http://asp-arka.blogspot.in/");
            };
        }
    }
</script>
</html>

Host the file in any server like IIS or Apache to run it. Direct running the file in browser won't work out. Click on the Notify button to get the notification. Change the text and image according to your requirement. 

Popular Posts

Pageviews