在执行完以上代码后,我们就成功地创建了一个消息框实例,在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>