直接进入正题 什么是 Notification 什么是 浏览器桌面通知
那么这个玩意儿到底是怎么来的呢 ? 我也挺好奇的(我在做一个聊天室,所以想搞这个)
于是搜索了一下这个通知 (不要搜Notification 不然你会找到一大堆Android之Notification)
卧槽~ 信息量好少啊,原来是一个 HTML 5 中的一个新元素 ,而且目前的浏览器基本上都是支持这个东东的,不过值得注意的是,如果你关闭或者刷新页面了。之前的通知就没法控制了 。(这个东东吧 还是尽量控制着用的好,避免不必要的麻烦)
在浏览器设置 ==》 高级设置 ==》 安全隐私(对你没看错是安全隐私) ==》通知 ==》 访问域 这个地方可以看到我们哪些域是开放了桌面通知的 (未授权的域是不准讲话的噢~ 不信你试试)
他怎么用呢????
首先我们得准备一台电脑,嗯。。。 PC或者平板(平板敲代码?厉害了)
然后我们直接打开浏览器控制台,直接打开 console里面输入Notification 来查看是否存在这个H5属性 (如果不存在就只好委屈一下换个浏览器了。如果浏览器都没有那么你还是下个新游览器或者更新吧 )
他的基本操作方式大概是这样的(获得权限==》回调==》操作) 这里要说明一下 他的回调方式是用的 promise 这个是ES6的特性
诶诶诶诶 前方高能
function gotest(){
Notification.requestPermission(function (perm) {
if (perm == "granted") {
var notification = new Notification("我和你讲:", {
dir: "auto",
lang: "这个是啥??",
tag: "这个是啥??",
icon: "http://www.fetchs.cn/images/kiana.jpg",
body: "小盆友快来玩呀~"
});
console.log(notification ) // 高能区域!!!
}
})
}
推送方法:new Notification(title, options),其中title是必须参数,表示通知小框框的标题内容,options是可选参数,下面是一些参数的简单说明(实际内容有很长,有兴趣的小伙伴可以看下html5api说明)
lang:这个是啥??
bady:提示消息的主体内容。会在标题的下面显示
tag:这个是啥??
icon:美女镇楼就可以了
renotify:是否替换之前的通知项
除了这些 快看看我们console出来了什么东东!
what? 这个东西有回调事件的!
onclick : 你碰我我就搞事
onclose : 你X我,我就会和你讲
onerror : 我错了,你要我干啥
onshow : 跳出来就干你要我干的事情
嗯- - 。大概就是这样子的吧 慢慢看慢慢学 前端这路坎坷啊。。
大家可以试试进我的聊天室 玩玩那 (不过还没完善 慢慢的在做一些更改) 等做完了会丢到github上面的