html 消息通知功能,HTML 5 Notification消息通知DEMO示例

Web Notifications是HTML5中一个令人欣喜的新特性，它支持开发者配置和显示桌面通知，为用户提供更好的体验，最令人称赞的是，即使用户忙于其他工作时也可以收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。

关于Notification的Constructor定义如下：

[Constructor(DOMString title, optional NotificationOptions options)]

interface Notification : EventTarget {

static readonly attribute NotificationPermission permission;

static void requestPermission(optional NotificationPermissionCallback callback);

attribute EventHandler onclick;

attribute EventHandler onshow;

attribute EventHandler onerror;

attribute EventHandler onclose;

readonly attribute DOMString title;

readonly attribute NotificationDirection dir;

readonly attribute DOMString lang;

readonly attribute DOMString body;

readonly attribute DOMString tag;

readonly attribute DOMString icon;

void close();

};

dictionary NotificationOptions {

NotificationDirection dir = "auto";

DOMString lang = "";

DOMString body;

DOMString tag;

DOMString icon;

};

enum NotificationPermission {

"default",

"denied",

"granted"

};

callback NotificationPermissionCallback = void (NotificationPermission permission);

enum NotificationDirection {

"auto",

"ltr",

"rtl"

};

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

检查浏览器是否支持Notification

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

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

创建消息通知

展示消息通知

HTML5 WebSocket测试

var NotificationHandler = {

isNotificationSupported : 'Notification' in window,

isPermissionGranted : function() {

return Notification.permission === 'granted';

},

requestPermission : function() {

//验证浏览器是否支持Notification，如果不支持打印提示信息并返回

if (!this.isNotificationSupported) {

console.log('当前浏览器不支持Notification API');

return;

}

//该方法将会询问用户是否允许显示通知,不能由页面调用(onload)，必须由用户主动事件触发(onclick等)

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

Notification.requestPermission(function(status) {

//status是授权状态，如果用户允许显示桌面通知，则status为'granted'

console.log('status: ' + status);

//permission只读属性:

//default 用户没有接收或拒绝授权 不能显示通知

//granted 用户接受授权 允许显示通知

//denied 用户拒绝授权 不允许显示通知

var permission = Notification.permission;

console.log('permission: ' + permission);

});

},

showNotification : function() {

if (!this.isNotificationSupported) {

console.log('当前浏览器不支持Notification API');

return;

}

if (!this.isPermissionGranted()) {

console.log('当前页面未被授权使用Notification通知');

return;

}

var n = new Notification("您有一条新消息", {

icon : 'cat.jpg',

body : '请五分钟后到老总办公室领取本年度奖金！'

});

//onshow函数在消息框显示时会被调用

//可以做一些数据记录及定时操作等

n.onshow = function() {

console.log('显示通知信息');

//5秒后自动关闭消息框

setTimeout(function() {

n.close();

}, 5000);

};

//消息框被点击时被调用

//可以打开相关的视图，同时关闭该消息框等操作

n.onclick = function() {

alert('打开相关视图');

//opening the view...

n.close();

};

//当有错误发生时会onerror函数会被调用

//如果没有granted授权，创建Notification对象实例时，也会执行onerror函数

n.onerror = function() {

console.log('产生错误');

//do something useful

};

//一个消息框关闭时onclose函数会被调用

n.onclose = function() {

console.log('关闭通知窗口');

//do something useful

};

}

};

//此处无效，不能由页面调用(onload)

document.addEventListener('load', function() {

NotificationHandler.requestPermission();

});

setTimeout(function() {

//if there has new mail, show notification

NotificationHandler.showNotification();

}, 3000);

show

notification

当页面在服务器上运行时，产生以下效果：

需要注意的是，消息通知只有通过Web服务访问该页面时才会生效，如果直接双击打开本地文件，是没有任何效果的。所以在平时做练习的时候也需要把文件目录放进Web容器内，切记。       消息通知是个不错的特性，可是也不排除有些站点恶意的使用这个功能，一旦用户授权之后，不时的推送一些不太友好的消息，打扰用户的工作，这个时候我们可以移除该站点的权限，禁用其消息通知功能。我们可以依次点击设置打开设置的选项卡，然后点击底部的显示高级设置，在隐私一项中点击内容设置，最后会弹出一个内容面板，向下滑动找到消息通知一项，如何更改，想必就不用多说了。