html5桌面提醒功能,HTML5 Notification 桌面提醒功能 API

桌面提醒的介绍

桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过，目前支持Desktop Notification功能的浏览器只有Chrome5+。

注：弹出来的内容中只能是文本，暂不支持HTML

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

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

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

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

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

5.此外，还需要解决一个便利性问题

桌面提醒Notification的API

桌面提醒实例

完整源码：

HTML5 Notification 桌面提醒功能 API

const miao = 5;

function init() {

if (window.webkitNotifications) {

window.webkitNotifications.requestPermission();

}

}

function notify() {

var icon = "/resources/images/logo.png";

var title = "窗口将在 " + miao + " 后关闭";

var body = "领悟书生桌面提醒API";

if (window.webkitNotifications) {

if (window.webkitNotifications.checkPermission()==0){

var popup = window

.webkitNotifications.createNotification(icon,

title, body);

popup.ondisplay = function(event) {

setTimeout(function() {

event.currentTarget.cancel();

}, miao * 1000);

}

popup.show();

} else {

window.webkitNotifications.requestPermission();

return;

}

}

}

效果图：

转载请注明出处【http://www.656463.com/article/337】