HTML5新特性[ Notifications ] 桌面消息

在执行完以上代码后，我们就成功地创建了一个消息框实例，在Chrome下面它最终会显示成这样：

到这里我们已经成功了一半，但能不能正确地显示出这个消息框，最终还取决于用户的授权。鉴于浏览器的安全机制，只有用户同意网页弹出消息通知框，消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。

Notification类提供了一个requestPermission方法，用来请求用户授权，代码如下：

Notification.requestPermission(function (permission) {
　　console.log(permission);
　　popNotice();
});

温馨提示：用户一旦没有授权，拒绝，以上方法将不再执行！

示例demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>桌面消息</title>
</head>
<body>
<!--JS代码：-->
<script type="text/javascript">
    // 判断是否支持Notification
    if (window.Notification) {
        //Notification 方法
        var popNotice = function () {
            var notification = new Notification("Hi，帅哥：", {
                body: '可以加你为好友吗？', //显示消息的内容
                icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' //显示消息的缩略图
            });

            //消息框被点击时被调用
            //可以打开相关的视图，同时关闭该消息框等操作
            notification.onclick = function () {
                notification.close();
            };

            //5秒后关闭消息框
            notification.onshow = function () {
                setTimeout(function () {
                    notification.close();
                }, 5000);
            };
        };

        if (Notification.permission == "granted") { //授权
            popNotice();
        } else if (Notification.permission != "denied") { //没有授权时询问
            Notification.requestPermission(function (permission) {
                console.log(permission);
                popNotice();
            });
        }
    } else {
        alert('浏览器不支持Notification');
    }
</script>

</body>
</html>

HTML5新特性[ Notifications ] 桌面消息

示例demo

猜你喜欢