Javascript Desktop Notifications

I'm not gonna write massive paragraphs about his one, but simply provide a nice example of how to implement desktop notifications for browsers running webkit in JavaScript. Who knows maybe Internet Explorer will support it some time soon?

Here's my useful function that should let you easily post notifications to the user, it includes an onclick handler and auto focuses the window on click too.

var Site = {};
Site.Notifications = {
    GainAccess: function (callback) {
        if (Notification.permission !== "granted") { 
            Notification.requestPermission(callback);
        }
    },
    Notify: function (title, message, imageAddress, onclick) {
        var notification = {};

        // Let's check if the browser supports notifications
        if (!("Notification" in window)) {
            //alert("This browser does not support system notifications");
            return;
        }

        // Let's check whether notification permissions have already been granted
        else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
            notification = new Notification(title,
            {
                icon: imageAddress,
                body: message,
            });
        }

        // Otherwise, we need to ask the user for permission
        else if (Notification.permission !== 'denied') {
            Notification.requestPermission(function (permission) {
                // If the user accepts, let's create a notification
                if (permission === "granted") {
                    notification = new Notification(title,
                    {
                        icon: imageAddress,
                        body: message,
                    });
                }
            });
        }

        // Add callback when notification is clicked.
        notification.onclick = function () {
            // Show user the screen.
            window.focus();

            // Close notification.
            notification.close();

            // Perform requested action.
            if (onclick != undefined && onclick != null) {
                onclick();
            }
        };
    }
}

Then you simply call it using the code below:

Site.Notifications.Notify("Hello world", "How you doin?", "http://linktomyimages.com/image.png", function () { alert ("You clicked my notification!") });

That's it.


By Luke Alderton at 26 Feb 2016, 12:37 PM

Tags: JavaScript

Comments

Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By dipbleds on Raspberry Pi - Bluetooth using Bluecove on Raspbian
12 Dec 2017, 21:29 PM
By Ich on Replacing the Xamarin Header/Navigation bar with a custom view/template
26 Nov 2017, 17:11 PM
By Ravi Motha on My experience at Umbraco UK Festival 2017
12 Dec 2017, 08:39 AM
By Borges on How to add a Xamarin Forms Loading Screen/Overlay
7 Nov 2017, 19:11 PM
By Rutul Mehta on Auto/Custom height on Xamarin Forms WebView for Android and iOS
4 Nov 2017, 03:15 AM
By Pablo on Xamarin MasterDetailPage has large margin/padding at top
26 Oct 2017, 15:31 PM
By faiza on Using MaryTTS or OpenMary in Java
22 Oct 2017, 12:54 PM
By Nietoperz on Using MaryTTS or OpenMary in Java
29 Sep 2017, 14:34 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development