HTML5桌面通知:notification

要求IM消息有像网页微信那样有新消息桌面右下角弹出一个提示框的效果

     Notification !终于发现网页微信是怎么实现的了!

     Notification 就是html5的新API,即桌面消息!

     var Notification = window.Notification || window.mozNotification || window.webkitNotification; 

     由于的H5,自然就存在一个浏览器支持问题! 如上代码,是为了兼容chrome和火狐。这是网友提供的代码,但是,经我自己测试,chrome 并没有window.webkitNotification,火狐也没有window.mozNotification对象。但是它们都有window.Notification对象

  

      经本人亲测,目前chrome、火狐、360,QQ浏览器都能支持!不过,ie不支持,不仅是ie 678,连ie11edge都不支持哦!只想对微软“呵呵”!

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5桌面通知</title>
    </head>
    <body>
        <input type="button" value="开启桌面通知" onclick="showNotice('','HTML5桌面消息');">
        <script>
            function showNotice(title,msg){
                var Notification = window.Notification || window.mozNotification || window.webkitNotification;
                if(Notification){
                    Notification.requestPermission(function(status){
                        //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
                        if("granted" != status){
                            return;
                        }else{
                            var tag = "sds"+Math.random();
                            var notify = new Notification(
                                title,
                                {
                                    dir:'auto',
                                    lang:'zh-CN',
                                    tag:tag,//实例化的notification的id
                                    icon:'http://www.yinshuajun.com/static/img/favicon.ico',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
                                    body:msg //通知的具体内容
                                }
                            );
                            notify.onclick=function(){
                                //如果通知消息被点击,通知窗口将被激活
                                window.focus();
                            },
                            notify.onerror = function () {
                                console.log("HTML5桌面消息出错!!!");
                            };
                            notify.onshow = function () {
                                setTimeout(function(){
                                    notify.close();
                                },2000)
                            };
                            notify.onclose = function () {
                                console.log("HTML5桌面消息关闭!!!");
                            };
                        }
                    });
                }else{
                    console.log("您的浏览器不支持桌面消息");
                }
            };
            showNotice("","HTML5桌面消息")
        </script>
    </body>
</html>
复制代码

  

requestPermission - 该方法将向用户请求询问显示提示框的权限。返回值有三个:
default
granted
denied
默认为default,就是需要询问!让用户作出选择;
如果选择是则变为 granted,表示允许显示通知;
denied则是禁止显示通知!

 

var notify = new Notification(title,options) 构造函数,两个参数为title(标题,可设为空,则不显示标题),options为一个对象,有以下几个属性:
dir(文字方向,经测试都不支持)
lang(语言)
body(消息体)
tag(标签)
icon(icon地址)

Notification对象还有四个事件:
onshow()
onclick()
onclose()
onerror()
分别在消息显示、被点击、被关闭和出错的时候被触发。下面的例子中完整的展示了这四个事件的使用。通常情况下,只需要处理点击事件就够了,比如点击消息后跳转到某一特定的页面。
例子中:window.focus();//如果通知消息被点击,通知窗口将被激活,即可在其他页面时点击后浏览器切换到我们的页面!
原文地址:https://www.cnblogs.com/hzcya1995/p/13317765.html