代码如下
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function createNotify(title, options) {
var PERMISSON_GRANTED = "granted";
var PERMISSON_DENIED = "denied";
var PERMISSON_DEFAULT = "default";
// 如果用户已经允许,直接显示消息,如果不允许则提示用户授权
if (Notification.permission === PERMISSON_GRANTED) {
notify(title, options);
} else {
Notification.requestPermission(function (res) {
if (res === PERMISSON_GRANTED) {
notify(title, options);
}
});
}
// 显示提示消息
function notify($title, $options) {
var notification = new Notification($title, $options);
console.log(notification);
notification.onshow = function (event) {
console.log("show : ", event);
};
notification.onclose = function (event) {
console.log("close : ", event);
};
notification.onclick = function (event) {
console.log("click : ", event);
// 当点击事件触发,打开指定的url
window.open(event.target.data)
notification.close();
};
}
}
createNotify("新的消息", {
body: "你有一个奖品待领取",
icon: "https://www.baidu.com/favicon.ico",
data: "https://www.baidu.com/"
});
/* 依次打印
* show: Event Object(事件对象),事件的type为"show"
* click: Event Object(事件对象),事件的type为"click"。点击消息后消息被关闭,跳到close事件。
* close: Event Object(事件对象),事件的type为"close"
*/
</script>
</body>
</html>
各浏览器的支持不是很统一
https://www.caniuse.com/?search=Notification
文件直接打开没有效果,需要由后台服务提供页面