html5桌面通知之Notification API详解(2)-木庄网络博客

关闭通知

从上面的参数可以看出，并没有一个参数用来配置显示时长的。我想要它 3s 后自动关闭的话，这时可以调用 close() 方法来关闭通知。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态，快去查看吧'})setTimeout(function() {
    n.close();}, 3000);

事件

Notification 接口的 onclick属性指定一个事件侦听器来接收 click 事件。当点击通知窗口时会触发相应事件，比如打开一个网址，引导用户回到自己的网站去。

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态，快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }})n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知}

应用场景

前面说那么多，其实就是为了用。那么到底哪些地方可以用到呢？

现在网站的消息提醒，大多数都是在消息中心显示个消息数量，然后发邮件告诉用户，这流程完全没有错。不过像我这种用户，觉得别人点个赞，收藏一下都要发个邮件提醒我，老是要去删邮件（强迫症），我是觉得挺烦的甚至关闭了邮件提醒。

当然这里并不是说要用 Notification，毕竟它和邮件的功能完全不一样。

我觉得比较适合的是新闻网站。用户浏览新闻时，可以推送给用户实时新闻。以腾讯体育为例，它就使用了 Notification API。在页面中引入了一个 notification2017_v0118.js，有兴趣可以看看别人是怎么成熟的使用的。

一进入页面，就获取授权，同时自己页面有个浮动框提示你允许授权。如果允许之后，就开始给你推送通知了。不过它在关闭标签卡的时候，通知也会被关闭，那是因为监听了页面 beforeunload 事件。

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();}if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);}

以上就是html5桌面通知之Notification API详解的详细内容，更多文章请关注木庄网络博客！

返回前面的内容