Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > 关于HTML5桌面提醒Notification的研究和探讨
隐藏/显示侧边栏

关于HTML5桌面提醒Notification的研究和探讨

2015-04-17 08:56    来源:未知    责任编辑:admin    字号【
很多人对于HTML5的认识可能还是一些标签的认识:<article> <header> <nav> <section> <aside> <footer> <dialog> <video> <canvas> <audio>等等标签的认识!!!下面介绍下HTML5桌面提醒Notification的功能!领略其真谛!

1. 为什么需要HTML5的桌面通知

传统的桌面通知可以写一个div放到页面右下角自动弹出来,并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是:当我在使用京东进行购物的时候,我是不知道人人网有消息推送过来给我的,而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的,但是我们需要这么一种策略:无论你在看哪个页面,只要有消息都应该能推送给我看到,这就是webkitNotification要解决的问题。Notification生成的消息不依附于某个页面,仅仅依附于浏览器。

2. 一个桌面通知生成的正常流程

我们先来看看一个桌面通知是如何生成的:

检查浏览器是否支持Notification

检查浏览器的通知权限(是否允许通知)

若权限不够则获取浏览器的通知权限

创建消息通知

展示消息通知

NOTE: 关于第一点的说明需要做一些说明,Notification目前还没有标准化,所以目前只支持chrome19+和safari6+;网上有资料显示Firefox26+也支持,但是我拿我的Firefox27检测的结果是无法支持。

HTML5桌面提醒Notification API

3. notification api基础说明及代码示例

目前notification的实现有两种:一种是之前草案中的形式:webkitNotifications对象, 另一种就是未来标准化的形式:Notification对象。首先来说一下webkitNotifications所包含的内容:



3.1 webkitNotifications:

3.1.1. 静态方法


window.webkitNotifications.checkPermission()

//该方法返回0, 1, 2三个值,0代表PERMISSION_ALLOWED,即’允许’;1代表PERMISSION_NOT_ALLOWED,即不允许;2代表PERMISSION_DENIED,即拒绝

window.webkitNotifications.requestPermission()

//调用该方法将会在浏览器的信息栏弹出一个是否允许桌面通知的提醒,该方法只能由用户主动事件触发,如click 或 mouse over,也就是说你不能在document.ready里面直接调用该方法。

window.webkitNotifications.createNotification('icon-url','title', 'body' )

//调用该方法将返回一个实例化的webkitNotifications对象

PS:调用以上方法都会存在安全异常,也就是当前页面的permission是否为0。


notificationInstance.show()

//调用该方法将在右下角弹出一个通知窗口

notificationInstance.cancel()

//调用该方法将关闭通知窗口


3.2 Notification API:

在chrome26+  Console终端里面输入window.Notification并键入回车键,会发现这东西它也是存在的,根据某些博客的说法,这个Notification会是webkitNotifications的标准化形态(传说中的进化),这种方式的实现相对于webkitNotifications的实现更简洁,更面向对象一些。 构造函数:


Notification(title, options)

//@param {String} title 要显示的通知标题

//@param {Object} options 备选项参数,键值对

//option 结构如下

dictionary NotificationOptions {

  NotificationDirection dir = "auto";

  DOMString lang = "";

  DOMString body;

  DOMString tag;

  DOMString icon;//在实例化的时候会异步的去获取

};

2

//新建一个Notification实例,并根据permission为'granted'来完成notification的显示

var notification = new Notification('Hello Notification',{body:"I'm an enginneer!"});

3.2.1. 静态属性

静态属性:

Notification.Permission:


'default' 等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知


Test:在chrome的地址栏里面输入http://www.baidu.com, 打开console,并在里面输入Notification.Permission 默认返回的是'default'.


Notes:该属性是只读的不能手动修改


//在百度的首页打开console

Notification.Permission = 'granted'

Notification.Permission   //'default'

实例属性:

以下属性都需要在Notification实例上才能访问,为只读属性,并且就是通过option来赋值


Notification.dir    //

Notification.lang

Notification.Body   //通知的具体内容

Notification.tag    //实例化的notification的id

Notification.icon   //通知的缩略图

3.2.2 静态方法

静态方法

Notification.requestPermission() ``` //该方法将会询问用户是否允许显示通知 ``` 该方法不能由页面自主调用,必须由用户主动事件触发,还是以百度的页面为例,百度的搜索框的id为'kw':


//不通过事件触发直接调用

Notification.requestPermission()

//页面无反应

```Javascript //通过用户主动事件触发来调用 document.getElementById('kw').onclick=function(){ Notification.requestPermission(); }; //页面信息栏会弹出询问用户是否允许显示桌面通知

```

Notes:当用户同意之后,再次调用该方法则无效,即该方法仅对Notification.Permission不为'granted'的时候起作用


实例方法

Notification.close()    //该方法允许通过代码控制关掉notification

Notes: Notification 没有实例方法show(),在Notification实例化的时候,浏览器就已经自动的去处理notification的显示过程了。


3.3 代码示例

以下代码将展示如何使用webkitNotification和Notification来显示桌面通知


document.getElementById('notifyButton').onclick = function(){

    //判断浏览器是否支持notification

    if(window.webkitNotifications){

        //判断当前页面是否被允许发出通知

        if(webkitNotifications.checkPermission==0){

            var icon_url = 'http://www.w3.org/';

            var title = 'Hello HTML5';

            var body = 'I will be always here waiting for you!';

            var WebkitNotification = webkitNotifications.createNotification(icon_url, title, body);

            WebkitNotification.show();

        }else{

            document.getElementById('requestbutton').onclick = function () {

                webkitNotifications.requestPermission();

            };

        }

    }else alert("您的浏览器不支持桌面通知特性,请下载谷歌浏览器试用该功能");

};

3.3.2 Notification


document.getElementById('notifyButton').onclick = function () {

    if (window.Notification){

        if(Notification.Permission==='granted'){

            var notification = new Notification('Hello Notification',{body:"I hope that all the browser will support this\                   function!"});

        }else {

            document.getElementById('requestButton').onclick = function (){

                Notification.requestPermission();

            };

        };

    }else alert('你的浏览器不支持此特性,请下载谷歌浏览器试用该功能');

};


//**********************************************demo 附上****************************************************/

//浏览器端 桌面提醒  相关操作---DEMO
if(window.Notification&&window.Notification.permission==="default"){
       //未开启桌面提醒,进行相关操作、或提示开启
}


开启桌面提醒
function openNotify()
{
      window.Notification.requestPermission(function(status){
          if(status === 'granted'){
               //如果开启了  则...
          }
      });
}
//myNotification(Object options,String title,Number time)功能桌面提醒功能,只支持高版本chrome和firefox
//参数:options 为对象{} 属性有body、icon、newUrl(跳转URL)
//参数:title 为标题部分, 有默认值
//参数:time 毫秒  默认:5秒

function myNotification(title,body,icon,time,callback){
	var options = {body:body,icon:icon,tag:"cgner"};
    /*
    if(window.Notification){
        try{   // 处理某些支持windown.Notification桌面提醒,但是window.Notification.permission==undefined的情况,例:360安全浏览器
            var notify=new Notification(title,options);
            notify.onshow = function(){
                setTimeout(function(){
                    notify.close();
                }, time);
            };
            notify.onclick = callback;
        }catch(e){}     
    }*/
  if(window.Notification && window.Notification.permission === "granted"){//支持Notification且开启桌面提醒
      var notify=new Notification(title,options);
      notify.onshow = function(){
          setTimeout(function(){
              notify.close();
          }, time);
      };
      notify.onclick = fn;
      notify.onclose = function(){}
      notify.onerror = function(){}
  }else if(window.Notification && window.Notification.permission !== "denied"){//支持Notification但未开启桌面提醒
      window.Notification.requestPermission(function(status){
          if(Notification.permission !== status){
              Notification.permission = status;
          }
      });
  }else{
      //console.log("该浏览器不支持桌面提醒!");
  };
};


关于webNotification的DEMO和检测浏览器支持Notification的情况 浏览:http://caniuse.com/notifications  (需要博主自己写的DEMO和研究成果可以留言)

更多
Tags 标签: HTML5 Notification HTML5桌面提醒
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |