Web Notifications是HTML5 的一个特性,目前我知道的有谷歌浏览器和windows edge对它进行了支持,用于向用户配置和显示桌面通知。
这些方法仅在 Notification 对象中有效。
Notification.requestPermission()
用于当前页面想用户申请显示通知的权限。这个方法只能被用户行为调用(比如:onclick 事件),并且不能被其他的方式调用。
这些方法仅在 Notification 实例或其 prototype 中有效。
1,Notification.close()
用于关闭通知。
Notification 对象继承自 EventTarget 接口。
2,EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
3,EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
4,EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
body{position: relative;}
.notification {
width: 200px;
height: 50px;
padding: 20px;
line-height: 50px;
text-align: center;
background: #008800;
border-radius: 5px;
font-size: 30px;
position: absolute;
left: 45%;
}
</style>
</head>
<body>
<div class="notification" @click="notifyMe()">notification</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '.notification',
data: {},
methods: {
notifyMe() {
// 先检查浏览器是否支持
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("你好snowball:", {
dir: "auto", //auto(自动), ltr(从左到右), or rtl(从右到左)
lang: "zh", //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
tag: "testTag", //赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示时候的图标
body: "今天是个好天气" // 一个图片的URL,将被用于显示通知的图标。
});
}
// 否则我们需要向用户获取权限
else if(Notification.permission !== 'denied') {
Notification.requestPermission(function(permission) {
// 如果用户同意,就可以向他们发送通知
if(permission === "granted") {
var notification = new Notification("你好snowball:", {
dir: "auto", //auto(自动), ltr(从左到右), or rtl(从右到左)
lang: "zh", //指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。
tag: "testTag", //赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
icon: "http://api.dangmeitoutiao.com/_/boss/0/img/2018/02/12/20180212085006554.JPEG", //提示时候的图标
body: "今天是个好天气" // 一个图片的URL,将被用于显示通知的图标。
});
}
});
}
// 最后,如果执行到这里,说明用户已经拒绝对相关通知进行授权
// 出于尊重,我们不应该再打扰他们了
}
}
})
</script>
</html>
chrome:浏览器设置-->内容设置-->通知-->允许-->点击删除某个网站。
截图:
4.1
4.2
4.3
4.4
4.5
兼容:
目前只是实现了浏览器端的notification,如果再写个接口,从接口中调取数据,在boss后台做信息管理与是否显示这样就非常棒了。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章