Web Notifications

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web Notifications</title>
    <link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>Web Notifications (<span>Supported</span>)</h1>
    </header>
    <article>
        <button id="btnNotification">Create notification</button>
    </article>    
</body>
</html>

CSS

body {
    font-family: "Verdana";
    font-size: 9pt;
}

header {
    padding: 15px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    background-color: rgb(27, 161, 226);
    color: #fff;
}

    header h1 {
        font-size: 14pt;
    }

    header span {
        color: green;
    }

h2 {
    font-size: 12pt;
    font-weight: bold;
}

article {
    width: 80%;
    margin: auto;
    margin-top: 20px;
}

button {
    padding: 10px;
    background-color: rgb(27, 161, 226);
    color: #fff;
    border-radius: 4px;
}

JavaScript

window.onload = function() {

    var btnNotification = document.getElementById("btnNotification");

    //Compatibility (Chrome Only)
    window.Notifications = window.webkitNotifications;

    if (window.Notifications) {

        btnNotification.addEventListener("click", function() {

            if (window.Notifications.checkPermission() == 0) { // Allowed
                var icon = "http://www.returngis.net/wp-content/uploads/pics/2012/11/angry-bird-icon.png",
                    title = "Web Notifications API",
                    message = "You can do something like this :)";

                var notification = window.Notifications.createNotification(icon, title, message);

                //Handlers
                notification.onshow = function() {
                    console.log("onshow fired");
                    setTimeout(function() {
                        notification.close();
                    }, 5000);
                };

                notification.onclick = function() {
                    console.log("onclick fired");
                };
                
                notification.onerror = function() {
                    console.log("onerror fired");
                };

                notification.onclose = function() {
                    console.log("onclose fired");
                };

                notification.show();

            }
            else {

                window.Notifications.requestPermission();
            }
        });
    }

    else {
        var span = document.querySelector("header h1 span");
        span.textContent = "Not supported";
        span.style.color = "red";
    }
}