编程技巧│浏览器 Notification 桌面推送通知
一、什么是 Notification
Notification是html5新增的api，用于想用户配置和现实桌面通知。这些通知的外观和特定功能因平台而异。
Notification通知是脱离浏览器的，即使用户没有停留在当前的标签页，甚至最小化了浏览器，也会在主屏幕的右下角显示通知，然后过一段时间后消失。
Notification在操作中也可以监听通知的显示，点击，关闭等事件。
二、弹窗授权
授权当前页面允许通知，可以通过检查只读属性 Notification.permission 的值来查看你是否已经有权限。
default： 用户还未被询问是否授权，可以通过 Notification.requestPermission() 可以询问用户是否允许通知
granted： 用户点击允许后的状态
denied： 用户点击拒绝后的状态，通知框不可用
Notification.requestPermission()三、弹窗使用
可以通过 new Notification($title, $options) 使用通知推送功能
title： 一定会被显示的通知标题
options： 可选，一个被允许用来设置通知的对象。它包含以下属性：
dir： 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
lang： 指定通知中所使用的语言。
body： 通知中额外显示的字符串
tag： 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
icon： 一个图片的URL，将被用于显示通知的图标。
new Notification("温馨提醒", {
body: "fly63前端网送你一份奖品待领取",
icon: "https://fly63.com/favicon.ico",
data: "https://fly63.com/"
});注意：
- 如果第一次在域名控制台中执行上述代码，会提示你是否开启通知。如果开启过，就会自动显示通知。
- 如果之前在域名中禁止消息通知，可以自己手动在开启，Notification是不能在禁止状态下代码设计开启消息通知的。
用户拒绝显示通知：
一旦用户禁止网站显示通知，网站就不能再请求用户授权显示通知，需要用户去设置中更改。已谷歌为例，在浏览器设置中，开始添加或者开始网站的消息通知。不同的浏览器通知设置的地方不太一样。
四、浏览器支持检测
"Notification" in window
function notify() {
// 先检查浏览器是否支持
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// 检查用户是否同意接受通知
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// 否则我们需要向用户获取权限
else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
// 如果用户接受权限，我们就可以发起一条消息
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
// 最后，如果执行到这里，说明用户已经拒绝对相关通知进行授权
// 出于尊重，我们不应该再打扰他们了
}五、授权回调
该通知有四个回调方法
onshow： 在通知展示的时候调用
onclose： 在通知关闭的时候调用
onclick： 在通知点击的时候调用
onerror： 在通知出错的时候调用
var notification = new Notification("温馨提醒", {
body: "fly63前端网送你一份奖品待领取",
icon: "https://fly63.com/favicon.ico",
data: "https://fly63.com/"
});
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();
};
notification.onerror = function (event) {
console.log("close : ", event);
};六、3秒后关闭弹窗
实现3秒后关闭弹窗的功能
var notification = new Notification('标题');
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 3000);
}本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！