浏览器桌面通知Notification

2017-02-25  本文已影响0人  程序员VVG
直接进入正题 什么是 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上面的

上一篇下一篇

猜你喜欢

热点阅读