<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5的Notification-Web的桌面通知功能</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type='text/javascript'></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<button id="showNoti">点击通知</button>
</div>
</div>
<script>
var instanceNotification = Notification || window.Notification;
console.log(instanceNotification);
if (instanceNotification) {
var permissionNow = instanceNotification.permission;
if (permissionNow === 'granted') {//允许通知
creatNotification();
} else if (permissionNow === 'default') {
setPermission();
} else if (permissionNow === 'denied') {
console.log('用户拒绝了你!!!');
} else {
setPermission();
}
}
function setPermission() {
//请求获取通知权限
instanceNotification.requestPermission(function (PERMISSION) {
if (PERMISSION === 'granted') {
console.log('用户允许通知了!!!');
creatNotification();
} else {
console.log('用户拒绝了你!!!');
}
});
}
function creatNotification() {
if (!window.Notification) {
alert("浏览器不支持通知！");
return false;
}
console.log(window.Notification.permission);
if (window.Notification.permission != 'granted') {
console.log('用户未开启通知权限!!!');
return false;
}
var instanceNotification = new Notification("您有一条订单消息，请及时处理！", { "icon": "", "body": "快点击处理吧!","requireInteraction":true });
instanceNotification.onshow = function () {
console.log("显示通知");
//3s后自动关闭通知
setTimeout(function () {
instanceNotification.close()
}, 3*1000);
};
instanceNotification.onclick = function () {
alert("打开页面");
window.open("/note");
instanceNotification.close();
};
instanceNotification.onclose = function () {
console.log("通知关闭");
};
instanceNotification.onerror = function () {
console.log('错误');
};
}
$(function () {
$("#showNoti").click(function () {
creatNotification();
})
});
//设置一个定时器，每隔5分钟进行一次通知
setInterval("creatNotification()",5*60*1000);
</script>
</body>
</html>
需要在浏览器设置通知权限里面加上需要通知的网页地址步骤：设置->隐私设置和安全性->网站设置->通知，添加对应的网址
具体api配置，请查看notification - Web API 接口参考 | MDN
2401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
