Html5 API之Notification对象实现桌面通知

Notification对象功能介绍：

主要用来推送桌面通知，效果类似网页版微信收到新消息时电脑桌面右下角出现新消息通知卡片条。Notification的优势在于：用户在浏览其他页面或者最小化浏览器窗口时，还可以收到桌面通知信息；

实例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5 API之Notification</title>
    </head>
    <body>
        <input type="button" value="开启桌面通知功能" onclick="showNotify('通知标题','HTML5桌面通知消息内容');">
        <script>
            function showNotify(title,msg){
                var Notification = window.Notification || window.mozNotification || window.webkitNotification;
                console.log(Notification.permission);
                if(Notification){
                    Notification.requestPermission(function(status){
                        if(status != "granted"){
                            return;
                        }else{
                            var tag = "sds"+Math.random();
                            Notification.body=msg;
                            //notifyObj属于Notification构造方法的实例对象
                            var notifyObj = new Notification(
                                title,
                                {
                                    dir:'auto',
                                    lang:'zh-CN',
                                    tag:tag,//实例化的notification的id
                                    icon:'images/img/u02.png',	//icon的值显示通知图片的URL
                                    body:msg
                                }
                            );
                            notifyObj.onclick=function(){
                                //如果通知消息被点击,通知窗口将被激活
                                window.focus();
                                alert(11)
                            },
                            notifyObj.onerror = function () {
                                console.log("HTML5桌面消息出错！！！");
                            };
                            notifyObj.onshow = function () {
                                setTimeout(function(){
                                    notifyObj.close();
                                },2000)
                            };
                            notifyObj.onclose = function () {
                                console.log("HTML5桌面消息关闭！");
                            };
                        }
                    });
                }else{
                    console.log("您的浏览器不支持桌面消息!");
                }
            };
        </script>
    </body>
</html>

大家不要以为直接复制到本地上就可以运行，它会报错滴；主要是因为Notification对象的通知必须需要获取到用户的权限才能显示，而权限是基于域名下的，在该域名下一般只需要授权一次就可以了。所以说需要将该代码放置本地服务器环境下就可以正常运行了。

如果看到效果，接下来我们来进一步解析这段代码的意思：

首页Notification通过requestPermission静态方法(不知道的自行百度)来向用户发送【请求权限】的通知，征求用户的同意是否显示【推送通知消息】。一般为3中状态:denied,default和granted;

denied:表示用户拒绝显示【推送通知消息】;

default:表示不知道用户是同意还是拒绝，一般默认状态为denied(拒绝)；

granted:表示用户同意显示【推送通知消息】；

获得授权后，接下来就new实例化Notification构造函数；

//实例化Notification构造函数的对象为notifyObj
var notifyObj=new Notification(title,options);

第一个参数title指定【推送通知消息】的标题;

第二个参数options是一个包含设置【推送通知消息】的对象;

实例属性：

这些属性只在Notification的实例才有作用(notifyObj实例化对象)

notifyObj.title(只读)用来显示【推送通知】的标题，在上述构造方法中指定的title参数

notifyObj.dir(只读)用来设置文本的显示方向，在上述构造方法的options参数中指定

notifyObj.lang(只读)用来设置【推送通知】的语音，在上述构造方法的options参数中指定

notifyObjcation.icon只读)用来设置【推送通知】的显示图标图片的URL地址，在上述构造方法的options参数中指定

notifyObj.body(只读)用来设置【推送通知】主题消息文本字符串，在上述构造方法的options参数中指定

事件处理器：

这些事件处理器也只在Notification的实例中有效(notifyObj实例化对象)

notifyObj.onclick当用户点击【推送通知】是被触发

notifyObj.onshow【推送消息】显示时被触发

notifyObj.onerror【推送消息】出错时触发

notifyObj.onclose【推送消息】关闭时被触发

静态方法：

Notification.requestPermission()该方法用来请求用户的通知权限

实例方法：

notifyObj.close()该方法只要用来关闭【推送消息】的显示

Html5 API之Notification对象实现桌面通知

猜你喜欢