html5桌面通知

桌面通知

桌面通知概念

传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:通知是显示在浏览器中的,当浏览器最小化或者切换到B页面之后,是无法看到A页面的通知的,也就是说这种方式的消息推送它是基于页面存活的。

有鉴于此,HTML5推出了桌面通知功能。顾名思义,这个通知看起来就跟其他的桌面通知一样,比如QQ的弹窗。因为没有在浏览器中展示,所以看起来似乎与浏览器没有关系,但其是靠浏览器运行的。这就是Notification。

Notification特点

Notification有如下特点:

  • 是否显示通知需要用户确认
  • 通知页面即使不是当前激活页面,也可显示此页面的通知
  • 通知是依附于浏览器的,浏览器关闭,通知也关闭
  • 通知并非显示在浏览器右下角,而是现实在桌面的右下角,更像是C/S程序

判断浏览器是否支持

要想使用桌面通知,首先要判断浏览器是否支持

!!window.Notification

Notifycation是window下的一个对象,如果有此对象,则转换为布尔值之后为true

使用Notifycation

Notification对象提供了一些方法,用来创建通知、运行通知

requestPermission方法

执行此方法时,浏览器会提供一个选项信息,让用户选择是否允许此页面显示通知,如果用户选择“允许”,则显示通知,否则不显示。

可在此方法的回掉函数中判断用户的选择,并执行相应的代码。

需要注意的是,无论用户是否允许,都会执行回掉函数

notification.requestPermission(function(permission) {//code})

代码测试:

Notifycation的permission属性

Notification.permission属性有三个值,表示三种状态,我们就是根据此属性的值来判断用户的选择

  • default:未设置过为这个状态,通过Notification.requestPermission()可以询问用户是否允许通知。如下图

这里写图片描述

  • granted:用户点击允许后的状态
  • denied[dɪ’naɪəd]: 用户点击拒绝后的状态,通知框不可用

代码测试:

创建通知

用户允许桌面通知后,就要构造桌面通知,看下面的代码

var mynotifi = new Notification("双十二,买买买", {
                body: "双十二马上来了,你准备好剁手了吗?千万好货来袭",
                icon: 'http://localhost/images/notification.png',
                tag:1
            });

构造通知需要Notification对象,此对象可以接受两个参数或者一个参数

第一个参数是通知的标题,显示在通知的正上方

第二个参数是通知的主体,使用{}括起来,使用键值对的方式表示信息,这些个参数是可选的

  1. body:通知的正文内容
  2. icon:通知显示的图标
  3. tag:通知框ID,相同id可替换,而不是出现新的通知框

关闭通知

close方法用于关闭通知。每个浏览器展现桌面通知的时间不一致,firefox的大概5秒,chrome要长一些,大概10秒,这是浏览器的默认时间,如果想随时关闭通知,除了用户点击通知右上角的关闭按钮(X)后,还可以在程序中调用close方法随时关闭

document.getElementById("btn1").onclick=function(){         
        mynotifi.close();
    }

Notifycation事件

Notification具有一些事件,便于我们控制通知。

onshow

显示通知框时调用

mynotifycation.onshow=funcion(){//code}

调用此事件时和调用show方法一样,也会执行桌面通知,只不过show方法只是执行桌面通知,而onshow事件除了可以执行桌面通知之外,还可以执行此事件绑定的代码,比如控制桌面通知的显示时间,或者播放通知声音

mynotifi.onshow = function() {
                var Music = new Audio("audios/open.mp3");
                Music.play();
                setTimeout(function() {
                    mynotifi.close();
                }, 5000);
            }

注意:不同的浏览器桌面通知的默认关闭事件不一样,上面已经说过,在设置关闭时间是,此时间值如果小于浏览器的默认时间,会有效果,但是如果大于默认关闭事件,则没有效果,仍然以默认关闭时间为准

onclick

点击通知框时调用,比如跳转到某个页面

mynotifi.onclick=function(){
                window.location.href="http://www.daqitc.net";
            }

onclose

点击通知框关闭按钮时调用,这个事件在桌面通知自动关闭是也会调用,比如播放声音

 mynotifi.onclose=function(){
                var music=new Audio("audios/close.mp3");
                music.play();
            }

onerror

发生错误时调用

完整案例

<!DOCTYPE html>
<html>

<head>
<title>桌面通知</title>
<script type="text/javascript">
function showmsg() {
    mynotify = new Notification("会议提醒", {
        body: '您计划于今天下午4点召开全体会议,请准时参加',
        icon: 'http://q4.qlogo.cn/g?b=qq&k=icUjVAN5Ja7BCDQ1ICl8Svw&s=40',
        tag: 1
    });
    mynotify.onshow = function() {
        setTimeout(function() {
            mynotify.close();
        }, 5000);
    }
    mynotify.onclick = function() {
        window.location.href = "http://www.baidu.com";
    }
    mynotify.onclose = function() {
        //可以在这里做一些有意义的事情,比如记录显示通知的次数
        document.write('ss');
    }
}
//判断浏览器是否支持桌面通知
if (window.Notification) {
    var notification = window.Notification;
    var mynotify;
    if (notification.permission == "granted") {
        //创建通知
        showmsg();
    }
    //判断许可状态
    else if (permission == "default") {
        /*
        如果用户从未设置过此网站的桌面提醒状态(可能是第一次访问这个网站,或者以前允许过,但是在通知-例外中删除掉了),则调用requestPermission方法,让用户选择是否允许桌面提醒
        */
        notification.requestPermission(function(permission) {
            //在回掉函数中判断用户的选择,在这里不用为“拒绝”选项编写代码,因为既然拒绝,就什么都不做了,也不用为默认状态编写代码,因为既然已经弹出让用户选择的选项了,就没有所谓的默认状态了。所以只需要处理用户允许的状态就可以了
            if (permission == "granted") {
                //创建通知
                showmsg();
            }
        });
    }
}
</script>
</head>

<body>
</body>

</html>
展开阅读全文

没有更多推荐了,返回首页