html5 桌面消息,web桌面消息通知(HTML5 Notification)

Notification.permission 该属性用于表明当前通知显示的授权状态,可能的值包括:

default :不知道用户的选择,默认。

granted :用户允许。

denied :用户拒绝。

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

console.log('用户允许通知');

}else if(Notification.permission === 'denied'){

console.log('用户拒绝通知');

}else{

console.log('用户还没选择,去向用户申请权限吧');

}

当用户还没选择的时候,我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

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

if(permission === 'granted'){

console.log('用户允许通知');

}else if(permission === 'denied'){

console.log('用户拒绝通知');

}

});

var notification = new Notification(title, options)

参数如下:

title:通知的标题

options:通知的设置选项(可选)。

body:通知的内容。

tag:代表通知的一个识别标签,相同tag时只会打开同一个通知窗口。

icon:要在通知中显示的图标的URL。

image:要在通知中显示的图像的URL。

data:想要和通知关联的任务类型的数据。

requireInteraction:通知保持有效不自动关闭,默认为false。

从上面的参数可以看出,并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话,这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{

body: '您有三个新消息,快去查看吧'

})

setTimeout(function() {

n.close();

}, 3000);

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件,比如打开一个网址,引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{

body: '你的朋友圈有3条新状态,快去查看吧',

data: {

url: 'http://blog.gdfengshuo.com'

}

})

n.onclick = function(){

window.open(n.data.url, '_blank');      // 打开网址

n.close();                              // 并且关闭通知

}

目前使用谷歌浏览器是可以的,好像谷歌浏览需要时https.其他浏览器未测,但手机端不兼容

以下代码是5分钟推送一次

function tishi(){

$.ajax({

type: 'get',

url: 'url',

dataType:'json',

data: '',

success: function(info){

if(info.status==200){

alert(info.message);

//                    var n = new Notification('状态更新提醒',{

//                        body: '您有三个新消息,快去查看吧',

//                        tag: 'sandao',

//                        icon: '/images/admin_logo.png',

//                        requireInteraction: true

//                    })

}

}

});

}

ref = setInterval(function(){

tishi();

},1000 * 300);

(0)

相关推荐