使用谷歌浏览器推送通知

使用谷歌浏览器推送通知

在使用twitter时，发现它可以在桌面右下角进行消息推送，于是就找到了一个谷歌推送的原生APINotification，这个api能像后台应用一样给我们的前端使用客户推送消息。

代码示例：

<button onclick="notification()">Notification</button>

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

    // 检查用户是否已经允许使用通知
    else if (Notification.permission === "granted") {
        // 创建 Notification
        var notification = new Notification('hello');
        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('hello');
            }
        });
    }

    // 注意：如果浏览器禁止弹出任何通知，将无法使用
}
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)
}
</script>

注意：推送消息的前提是网站推送权限被允许的情况。
可以把示例放入自己的项目内，或者使用node的http-server启动服务。