HTML5新特性[ Notifications ] 桌面消息

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

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

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

1
2
3
4
Notification.requestPermission(function (permission) {
  console.log(permission);
  popNotice();
});

温馨提示:用户一旦没有授权,拒绝,以上方法将不再执行!

示例demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>
感谢支持原创技术分享
显示 Gitment 评论