JavaScript desktop notification does not work on the server

Question

I have deployed my javascript desktop notification code on the web server but it is not working. It's working on my localhost properly. Can somebody help me out?

JavaScript Snippet

function showNotifaication() {
    if (!("Notification" in window)) {
        alert("Desktop notifications is not supported by this browser. Try another.");
        return;
    } else if (Notification.permission === "granted") {
        var myNotification = new Notification("Twitter", {
            icon: "https://pbs.twimg.com/profile_images/875087697177567232/Qfy0kRIP_400x400.jpg",
            body: "Follow me on Twitter."
        });
        myNotification.onclick = function () {
            window.open("https://twitter.com/google");
        };

    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (userPermission) {
            if (userPermission === "granted") {
                var myNotification = new Notification("Google", {
                    icon: "https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg",
                    body: "Search on the Web."
                });
                myNotification.onclick = function () {
                    window.open("http://www.google.com");
                };

            }
        });
    }
}

and the button code

<button onclick="showNotifaication();">Show Notification</button>

All the above code works fine for the local machine whenever I have deployed it on the Apache server it will not work. One thing that I have noticed that my browser has already blocked the Notification and it is disabled also. No option for enables it.

Answer 1

JavaScript desktop notification only works with HTTPS connection.

Answer 2

From MDN, it looks like starting from Chrome 62, notificatin API is available in secure contexts only, i.e. only through localhost or a website running on HTTPS.