什么是Notification?
Notifications API 的接口 Notification 用于配置以向用户显示桌面通知。
这些通知的外观和功能因平台而异,但通常它们会提供一种异步向用户提供信息的方式。
前置要求
- win10系统,且通知与操作中开启浏览器的通知权限
- 浏览器开启了对应站点的通知权限
- 对应站点使用HTTPS协议
- 用户选择允许通知
因为前置要求着实有点多,所以目前适用于用户行为和浏览器可控的场景,或者作为浏览器页面内通知的增强版。
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification</title>
</head>
<body>
<button onclick="notifyMe()">Notify me!</button>
<script>
function notifyMe() {
if (!("Notification" in window)) {
// Check if the browser supports notifications
alert("This browser does not support desktop notification");
} else if (Notification.permission === "granted") {
// Check whether notification permissions have already been granted;
// if so, create a notification
const notification = new Notification("Hi there!");
// …
} else if (Notification.permission !== "denied") {
// We need to ask the user for permission
Notification.requestPermission().then((permission) => {
// If the user accepts, let's create a notification
if (permission === "granted") {
const notification = new Notification("Hi there!");
}
});
}
// At last, if the user has denied notifications, and you
// want to be respectful there is no need to bother them anymore.
}
</script>
</body>
</html>
运行效果
允许浏览器通知
通知:
win10设置允许发送者通知
最后
在DevOps、办公系统中作为增强提示,惊呆了用户~