消息通知

传统方法

实现方式:通过闪烁页面的标题

实现方法:使用定时器不断地修改document.title的值

 var titleInit = document.title, isShine = true;

        setInterval(function () {
            var title = document.title;
            if (isShine == true) {
                if (/新/.test(title) == false) {
                    document.title = '【你有新消息】';
                } else {
                    document.title = '【     】';
                }
            } else {
                document.title = titleInit;
            }
        }, 500);

        window.onfocus = function () {
            isShine = false;
        };
        window.onblur = function () {
            isShine = true;
        };

        // for IE
        document.onfocusin = function () {
            isShine = false;
        };
        document.onfocusout = function () {
            isShine = true;
        };
js代码

窗体失焦的时候,标题就会闪。
这里有一个小的知识点,就是浏览器窗体获得焦点和失去焦点,Chrome和FireFox浏览器是window的onfocus, onblur方法;而IE浏览器则是document的onfocusin, onfocusout方法。

 

HTML5新特性之WebNotifications

要创建消息通知,首先我们要创建一个消息框,这非常很简单,直接使用window对象下面的Notification类即可,代码如下:

 var n = new Notification("sir, you got a message", {  
        icon: 'img/icon.png',  
        body: 'you will have a meeting 5 minutes later.'  
    });  

在Notification这个类的构造函数中,有两个重要的参数,第一个是消息的标题,第二个是消息体对象,其中包括消息框的图标(icon)和消息内容(body)。
在执行完以上代码后,我们就成功地创建了一个消息框实例.

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

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

Notification.requestPermission(function(status) {  
        //status是授权状态,如果用户允许显示桌面通知,则status为'granted'  
        console.log('status: ' + status);  
      
        //permission只读属性  
        var permission = Notification.permission;  
        //default 用户没有接收或拒绝授权请求 不能显示通知  
        //granted 用户接受授权请求 允许显示通知  
        //denied  用户拒绝授权请求 不允许显示通知  
      
        console.log('permission: ' + permission);  
    });  

 完整实例如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../assets/js/jquery.js"></script>
    <script type="text/javascript">
        var NotificationHandler = {
            isNotificationSupported: 'Notification' in window,
            isPermissionGranted: function () {
                return Notification.permission === 'granted';
            },
            requestPermission: function () {
                if (!this.isNotificationSupported) {
                    console.log('the current browser does not support Notification API');
                    return;
                }

                Notification.requestPermission(function (status) {
                    //status是授权状态,如果用户允许显示桌面通知,则status为'granted'  
                    console.log('status: ' + status);

                    //permission只读属性  
                    var permission = Notification.permission;
                    //default 用户没有接收或拒绝授权 不能显示通知  
                    //granted 用户接受授权 允许显示通知  
                    //denied  用户拒绝授权 不允许显示通知  

                    console.log('permission: ' + permission);
                });
            },
            showNotification: function () {
                if (!this.isNotificationSupported) {
                    console.log('the current browser does not support Notification API');
                    return;
                }
                if (!this.isPermissionGranted()) {
                    console.log('the current page has not been granted for notification');
                    return;
                }

                var n = new Notification("sir, you got a message", {
                    icon: 'img/icon.png',
                    body: 'you will have a meeting 5 minutes later.'
                });

                //onshow函数在消息框显示时会被调用  
                //可以做一些数据记录及定时操作等  
                n.onshow = function () {
                    console.log('notification shows up');
                    //5秒后关闭消息框  
                    setTimeout(function () {
                        n.close();
                    }, 5000);
                };

                //消息框被点击时被调用  
                //可以打开相关的视图,同时关闭该消息框等操作  
                n.onclick = function () {
                    alert('open the associated view');
                    //opening the view...  
                    n.close();
                };

                //当有错误发生时会onerror函数会被调用  
                //如果没有granted授权,创建Notification对象实例时,也会执行onerror函数  
                n.onerror = function () {
                    console.log('notification encounters an error');
                    //do something useful  
                };

                //一个消息框关闭时onclose函数会被调用  
                n.onclose = function () {
                    console.log('notification is closed');
                    //do something useful  
                };
            }
        };

        document.addEventListener('load', function () {
            //try to request permission when page has been loaded.  
            NotificationHandler.requestPermission();
        });

        setTimeout(function () {
            //if there has new mail, show notification  
            NotificationHandler.showNotification();
        }, 5000);
    </script>
</head>
<body>
    <button onclick="NotificationHandler.showNotification()">show notification</button>  
</body>
</html>
View Code

引用: http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

    http://blog.csdn.net/liuhe688/article/details/41971215



posted on 2016-10-26 17:29  eye_like  阅读(861)  评论(0编辑  收藏  举报