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. 

16 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. These minimal information and facts will be built coupled vikram university ba 2nd year result with numerous track record information and facts. vikram university ba 3rd year result I favor this significantly.

    ReplyDelete
  14. Nice Blog information.
    GIEC Global is the Best Education Consultants in Melbourne, Australia and education consultant in Melbourne, Sydney, Brisbane, Perth, Adelaide,Australia.Education Consultants in Melbourne, Best Education Agent in Melbourne, Sydney, Adelaide, Perth, and Brisbane is GIEC Global. We are Melbourne Migration and Education Consultants, Education Migration Agent Melbourne, Melbourne Study Abroad, and Performance Education Melbourne

    ReplyDelete
  15. I loved to read blogs and your blog is one of the best blog.Satta King

    ReplyDelete

Popular Posts

Pageviews