if(window.Notification){
console.log("浏览器支持Notification");
// 业务代码
}else{
console.log("浏览器不支持Notification");
} if(Notification.permission === 'granted') {
console.log('用户曾经同意接受通知');
}else if(Notification.permission === 'default'){
console.log('用户还未选择，可以询问用户是否同意发送通知');
}else{
console.log('用户曾经拒绝显示通知');
}Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('用户同意授权');
var notification = new Notification(title, options); // 显示通知
} else if (permission === 'default') {
console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
} else {
// denied
console.log('用户拒绝授权 不能显示通知');
}
}); const n = new Notification('XX网站消息通知', {
body: '你的朋友有新状态啦，快去围观吧！',
tag: 'testTag',
icon: 'https://static.cnblogs.com/images/adminlogo.gif',
requireInteraction: true // 不自动关闭通知
}); n.onshow = function () {
console.log('通知显示了！');
}
n.onclick = function (e) {
// 可以直接通过实例的方式获取data内自定义的数据
// 也可以通过访问回调参数e来获取data的数据
window.open(n.data.url, '_blank');
n.close();
}
n.onclose = function () {
console.log('关闭了！！');
}
n.onerror = function (err) {
console.log('出错了，检查一下吧');
throw err;
}
最后一个完整的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5桌面通知</title>
</head>
<body>
<button id="btnNotify">点我模拟收到桌面通知</button>
<p id="text" style="color: orange"></p>
<script>
var btnNotify = document.getElementById('btnNotify');
var text = document.getElementById('text');
const NotificationInstance = Notification || window.Notification;
NotificationInit();
btnNotify.onclick = function() {
NotificationInit();
}
// 初始化
function NotificationInit(){
if (NotificationInstance) {
const permissionNow = NotificationInstance.permission;
//允许通知
if (permissionNow === 'granted') {
CreatNotification();
} else if (permissionNow === 'denied') {
text.innerHTML = '用户之前拒绝了桌面提醒!';
} else {
setPermission();
}
}else{
alert("浏览器不支持Notification");
}
}
//请求获取通知权限
function setPermission() {
NotificationInstance.requestPermission(function (PERMISSION) {
if (PERMISSION === 'granted') {
CreatNotification();
} else {
text.innerHTML = '用户拒绝了你!';
}
});
}
function CreatNotification() {
const n = new Notification('XX网站消息通知', {
body: '你的朋友有新状态啦！',
tag: 'testTag',
icon: 'https://gitee.com/yinuocode/blogsImg/raw/master/img/avatar.jpg',
data: {
url: 'https://yuanqiao.pw'
},
requireInteraction: true // 不自动关闭通知
});
n.onshow = function () {
text.innerHTML = '通知显示了！';
}
n.onclick = function (e) {
window.open(n.data.url, '_blank');
n.close();
}
n.onclose = function () {
text.innerHTML = '关闭了！';
}
n.onerror = function (err) {
text.innerHTML = '出错了！';
throw err;
}
}
</script>
</body>
</html>