js实现浏览器通知
##这种一直在轮询等到有通知的时候获取权限是否显示通知
在这里插入代码片
(function(window) {
'use strict';
function Notify() {};
window.Notify = Notify;
//设置参数;
var options = {
noticeList: [], //通知存储数组
notification: null, //通知对象
title: '',
body: '',
data: {
url: 'https://www.aigupiao.com/'
},
icon: 'img/logo.png',
content: "通知...",
time: 1000
};
Notify.showNotice = function(title, body, icon, data) {
if (!("Notification" in window)) {
alert("抱歉,您的浏览器不支持桌面通知");
} else if (Notification.permission === "granted") {
options.notification = new Notification(title ? title : options.title, {
body: body ? body : options.body,
icon: icon ? icon : options.icon,
// requireInteraction: true,
data: data
});
options.noticeList.push(options.notification);
} else if (Notification.permission !== "denied") {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
options.notification = new Notification(title ? title : options.title, {
body: body ? body : options.body,
icon: icon ? icon : options.icon,
// requireInteraction: true,
data: data
});
options.noticeList.push(options.notification);
}
});
}
};
//单击通知
Notify.clickNotice = function() {
if (options.notification != null) {
options.notification.onclick = function() {
window.open(options.notification.data.url, '_blank');
};
}
};
//清除通知
Notify.clearNotice = function() {
// options.notification.close();
options.noticeList[options.noticeList.length - 1].close();
options.noticeList.pop();
};
//清除所有通知
Notify.clearAllNotice = function() {
for (var i = 0; i < options.noticeList.length; i++) {
options.noticeList[i].close();
}
};
//自动关闭
Notify.autoClose = function(time) {
if (options.notification != null) {
time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
}
};
Notification.requestPermission(function(permission) {
console.log(permission);
});
var inter = setInterval(function() {
$.ajax({
url: "你要轮询的url",
dataType: "json",
success: function(res) {
if(res.rslt === 'succ'){
var data = res.data
for (var i = data.length - 1; i >= 0; i--) {
(function(item){
Notify.showNotice(item.title, item.content, item.icon, item);
Notify.clickNotice()
Notify.autoClose(20000);
})(data[i])
}
}
// Notify.clearNotice();
// Notify.clearAllNotice();
}
});
}, 6000);
})(window);
或者
这种适合没有权限就不让轮询的情况(防止无用的轮询)。
;
(function(window) {
'use strict';
var open_notify = localStorage.getItem('notify_switch');
console.log(open_notify)
if(open_notify === 'true' || open_notify === null) {
$('#notify_switch').removeClass('is_off').addClass('is_open');
}
if(open_notify === null) {
localStorage.setItem('notify_switch','true');
}
function Notify() {};
window.Notify = Notify;
var inter = null;
//设置参数;
var options = {
noticeList: [], //通知存储数组
notification: null, //通知对象
title: '',
body: '',
data: {
url: 'https://www.aigupiao.com/'
},
icon: 'img/logo.png',
content: "通知...",
time: 1000
};
Notify.showNotice = function(title, body, icon, data) {
if (!("Notification" in window)) {
alert("抱歉,您的浏览器不支持桌面通知");
} else if (Notification.permission === "granted") {
options.notification = new Notification(title ? title : options.title, {
body: body ? body : options.body,
icon: icon ? icon : options.icon,
// requireInteraction: true,
data: data
});
options.noticeList.push(options.notification);
} else if (Notification.permission !== "denied") {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
options.notification = new Notification(title ? title : options.title, {
body: body ? body : options.body,
icon: icon ? icon : options.icon,
// requireInteraction: true,
data: data
});
options.noticeList.push(options.notification);
}
});
}
};
//单击通知
Notify.clickNotice = function() {
if (options.notification != null) {
options.notification.onclick = function() {
window.open(options.notification.data.url, '_blank');
};
}
};
//清除通知
Notify.clearNotice = function() {
// options.notification.close();
options.noticeList[options.noticeList.length - 1].close();
options.noticeList.pop();
};
//清除所有通知
Notify.clearAllNotice = function() {
for (var i = 0; i < options.noticeList.length; i++) {
options.noticeList[i].close();
}
};
//自动关闭
Notify.autoClose = function(time) {
if (options.notification != null) {
time == null ? setTimeout(options.notification.close.bind(options.notification), options.time) : setTimeout(options.notification.close.bind(options.notification), time);
}
};
//打开页面询问用户是否打开浏览器推送
Notify.isNotice = function() {
if (window.Notification) {
// 支持
console.log('yes');
} else {
console.log('no');
// 不支持
}
console.log(Notification.permission);
Notification.requestPermission(function(permission) {
console.log(permission)
if (permission === "granted") {
polling();
console.log(permission)
return;
//如果开启则开始轮询推送
}else if(permission === "denied") {
console.log(permission)
//如果用户选择关闭则关闭轮询
}
});
};
function polling() {
var open_notify_r = localStorage.getItem('notify_switch');
console.log(open_notify_r)
if(open_notify_r != 'true') {
console.log(open_notify_r)
return;
}
inter = setInterval(function() {
console.log(122121)
$.ajax({
url: "轮询url",
dataType: "json",
success: function(res) {
if(res.rslt === 'succ'){
var data = res.data
for (var i = data.length - 1; i >= 0; i--) {
(function(item){
Notify.showNotice(item.title, item.content, item.icon, item);
Notify.clickNotice()
Notify.autoClose(20000);
})(data[i])
}
}
// Notify.clearNotice();
// Notify.clearAllNotice();
}
});
}, 60000);
}
Notify.isNotice();
$('#notify_switch').click(function() {
if($(this).hasClass('is_open')) {
$(this).removeClass('is_open').addClass('is_off');
localStorage.setItem('notify_switch','false');
clearInterval(inter);
} else {
$(this).removeClass('is_off').addClass('is_open');
localStorage.setItem('notify_switch','true');
clearInterval(inter);
Notify.isNotice();
}
})
})(window);
一些注意注意事项
1、一些内核下只支持https协议的页面获得推送权限。
2、低版本的浏览器不支持此api
3、有些浏览器(比如qq浏览器)默认会关闭所有网站获取通知的权利(在浏览器设置层面),这时js无能为力,只能是用户手动设置浏览器权限来达到获取通知的目的。