JavaScript 实现 Chrome 桌面通知 (Notification)

今天发现 hacpai 在收到消息提醒时，右下角会弹出一个长方形的消息框，这个在 Chrome 插件拓展 见过很多次，觉得很有趣，便查了下 API ，折腾出了下面的代码：

JavaScript:

 function notifyMe() {
    // 检查浏览器是否支持 Notification
    if (!("Notification" in window)) {
        alert("你的不支持 Notification!  TAT");
    }

    // 检查用户是否已经允许使用通知
    else if (Notification.permission === "granted") {
        // 创建 Notification
        var notification = new Notification("Hey guy!");
        notification.iconurl = 'http://b3logfile.com/avatar/1450241301546-260.jpg?1451971807339';
        autoClose(notification);

    }

    // 重新发起请求，让用户同意使用通知
    else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {

            // 用户同意使用通知
            if (!('permission' in Notification)) {
                Notification.permission = permission;
            }

            if (permission === "granted") {
                // 创建 Notification
                var notification = new Notification("Hey guy!");
            }
        });
    }

    // 注意：如果浏览器禁止弹出任何通知，将无法使用
}

function autoClose(notification) {
    if (typeof notification.time === 'undefined' || notification.time <= 0) {
        notification.close();
    } else {
        setTimeout(function () {
            notification.close();
        }, notification.time);
    }

    notification.addEventListener('click', function () {
        notification.close();
    }, false)
}
​

HTML:

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

欢迎大家来我博客耍~ http://buhuibaidu.me
☺️