html5 桌面提醒参数,[HTML5]Notification桌面提醒功能

桌面提醒的介绍

桌面通知功能能够让浏览器即使是最小化状态也能够将消息通知给用户。这和WebIM是最为天然的结合。弹出来的内容只能是文本，暂不支持HTML。

Notification桌面提醒功能的好处

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

Notification生成的消息不依附于某个页面，仅仅依附于浏览器。

Notification使用注意事项

在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决一下几个问题：

1.收到多条消息时确保只出现一条通知

2.当用户处于IM出现的页面中时(页面处于foucus状态)，不出现通知

3.当用户使用多tab开启多个存在IM的页面时，只要有一个页面处于focus状态将不出现通知

4.如何让用户点击通知浮动层即可定位到具体的聊天窗口

5.还需要解决一个便利性的问题

Notification桌面提醒生成的正常流程

1.检查浏览器是否支持Notification

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

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

4.创建消息通知

5.展示消息通知

桌面提醒Notification的API

在chrome26+开发工具console终端里面输入Notification并键入回车键，会发现这东西它也是存在的。

构造函数

Notification(title, options)

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

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

//option 结构如下

dictionary NotificationOptions {

NotificationDirection dir = "auto";

DOMString lang = "";

DOMString body;

DOMString tag;

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

};

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

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

属性

静态属性

Notification.permission

见到很多博客文章里都是Notification.Permission,P大写，结果console端口敲入大写的Permission结果为undefined，应该为小写的p：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   //通知的缩略图

方法

静态方法

Notification.requestPermission()

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

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

Notification.requestPermission()

//页面无反应

Javascript //通过用户主动事件触发来调用

document.getElementById('kw').οnclick=function(){ Notification.requestPermission(); };

//页面信息栏会弹出询问用户是否允许显示桌面通知

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

实例方法

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

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

示例代码

html>

HTML5 Notification桌面提醒

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

if (window.Notification){

//console.log(Notification.permission);

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

var options={

body:"欢迎来到我的站：http://www.jzcoder.com",

icon:"Notification.jpg"

};

var notification = new Notification('jzcoder.com欢迎您',options);

//3秒后自动关闭

notification.onshow = function () {

setTimeout(function () {

notification.close();

}, 3000);

};

}else {

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

Notification.requestPermission();

};

};

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

};

结果如下图：