html5+桌面推送,HTML5 Web Notifications 桌面推送小记

简介

Web Notifications目前在w3c的协议中已是“推荐”(REC:Recommendation)阶段，除了iE外，各大现代浏览器都对这个桌面推送有了基本的支持。这都表明咱们如今能够很好的在应用中使用桌面推送的特性。在移动端浏览器方面，可能由于平台的权限限制的缘由目前只有firefox积极地支持这个属性。Web Notifications也能很好的工做在web workers中。chrome

经常使用API

Notification.permission

使用 Web Notifications以前要向用户申请权限，Notification.permission属性是一个只读属性表示当前站点Web Notifications的状态，它有三个值default、granted和denied，在用户没有给予权限时，即站点的默认状态通常是default，仅在这个状态时，可使用Notification.requireInteraction向用户申请权限，用户会在浏览器上看到一个 Web Notifications权限的确认框，选择Notification.permission属性改变为granted表示用户容许使用Web Notifications，Notification.permission属性改变为denied表示用户禁止使用Web Notifications，而且不可再向用户申请权限。

Safari (较旧版)和 Chrome (在 32 版本以前) 尚未实现 permission 属性。api

Notification.requestPermission

向用户申请权限函数，仅在Notification.permission状态为default时候生效。其余状态浏览器为了友好的用户体验不会再向用户请求权限，用户若是想要修改权限须要手动设置权限。

Notification.requestPermission有两种写法：

对于比较新的浏览器，使用基于promise的语法promise Notification.requestPermission().then(function(permission) { ... });

对于比较旧的浏览器，使用回调函数(Safari某些较新版本也须要使用回调函数)浏览器 Notification.requestPermission(callback);

Notification 实例经常使用属性函数

首先这里是一个简单的Notification实例：网站 var notification = new Notification(title, {

body: '...',

icon: '...',

sound :'...'

});

Notification.title 消息的主题

Notification.icon 消息体的图标

Notification.body 消息体的内容

Notification.sound 消息体提示的声音(支持性很低)

ui

Notification 实例相关事件google Notification.onclick

Notification.onerror

Notification.onclose

Notification.onshow

一个demo的代码url

if (window.Notification) {

var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') != -1) {

if (ua.indexOf('chrome') > -1) {

// Chrome

Notification.requestPermission().then(function(permission) {

if (permission == "granted") {

var notification = new Notification('桌面推送', {

body: '这是个人第一条桌面推送',

icon: 'some/icon/url'

});

notification.onclick = function() {

console.log('点击');

notification.close();

};

} else {

Notification.requestPermission();

console.log('没有权限,用户拒绝:Notification');

}

});

} else {

// Safari

Notification.requestPermission(function(permission) {

if (permission == "granted") {

var notification = new Notification('桌面推送', {

body: '这是个人第一条桌面推送',

icon: 'some/icon/url'

});

notification.onclick = function() {

console.log('点击');

notification.close();

};

} else {

Notification.requestPermission();

console.log('没有权限,用户拒绝:Notification');

}

})

}

}

} else {

console.log('不支持Notification');

}

手动设置权限

chrome用户请在 "设置->隐私设置->内容设置－>通知"选择网站域名点击容许

其余浏览器相似，请本身google