PrefaceNotificationAPI是HTML5新增的桌面通知API，用于向用户显示通知信息。通知与浏览器分离。即使用户不停留在当前标签，甚至最小化浏览器，通知信息仍然会显示在最上面。用户权限如果要向用户显示通知消息，需要获得用户权限，同一个域名只需要获得一次权限。Notification只有在用户允许的情况下才能发挥作用，避免Notification被某些网站的广告滥用或其他影响用户。那么你怎么知道用户是否被允许呢？Notification.permission该属性用于表示当前通知显示的授权状态，可能的值包括：default：用户的选择未知，默认。granted：用户允许。denied:被用户拒绝。if(Notification.permission==='granted'){console.log('Userallowednotification');}elseif(Notification.permission==='denied'){console.log('Userdeniednotification');}else{console.log('用户还没有选择，去用户那里申请权限');}请求权限当用户还没有选择的时候，我们需要向用户请求权限。Notification对象提供了一个requestPermission()方法来请求用户当前来源的许可以显示通知。之前基于回调的语法已经被弃用（当然现在的浏览器仍然可以使用），最新的规范已经将这个方法更新为基于promise的语法：Notification.requestPermission().then(function(permission){if(permission==='granted'){console.log('Userallowednotification');}elseif(permission==='denied'){console.log('Userdeniednotification');}});push通知被用户授权后，就可以推送通知了。varnotification=newNotification(title,options)参数如下：title：通知的标题options：通知的设置选项（可选）。body：通知的内容。tag：表示通知的标识标签。同一个标签只会打开同一个通知窗口。icon：要在通知中显示的图标的URL。image：要在通知中显示的图像的URL。data：要与通知关联的任务类型的数据。requireInteraction：通知保持有效，不会自动关闭，默认为false。还有一些其他的参数，因为没有用到或者没有用，这里就不用说了。varn=newNotification('状态更新提醒',{body:'朋友圈有3个新状态，快去看看',tag:'linxin',icon:'http://blog.gdfengshuo.com/images/avatar.jpg',requireInteraction:true})通知消息效果图如下：关闭通知从上面的参数可以看出，没有配置显示时长的参数。如果我想让它在3秒后自动关闭，那么我可以调用close()方法来关闭通知。varn=newNotification('状态更新提醒',{body:'你的朋友圈有3个新状态，去看看'})setTimeout(function(){n.close();},3000);EventNotification接口的onclick属性指定一个事件监听器来接收点击事件。当通知窗口被点击时，会触发相应的事件，比如打开一个URL，引导用户回到他的网站。varn=newNotification('状态更新提醒',{body:'朋友圈有3个新状态，去看看',data:{url:'http://blog.gdfengshuo.com'}})n.onclick=function(){window.open(n.data.url,'_blank');//打开URLn.close();//并关闭通知}应用场景前面说了那么多，其实都是拿来用的。那么它可以用在什么地方呢？现在网站上的消息提醒大多是在消息中心显示一些消息，然后发邮件告诉用户这个过程没有问题。但是，像我这样的用户觉得，当别人点赞或收藏某样东西时，他们会给我发邮件提醒我。老是要删邮件（强迫症），觉得挺烦的，连邮件提醒都关掉了。当然，这并不是说要用Notification，毕竟它的作用和邮件完全不一样。我认为它更适合新闻网站。用户浏览新闻时，可以向用户推送实时新闻。以腾讯体育为例，它使用了NotificationAPI。页面中引入了一个notification2017_v0118.js，有兴趣的可以看看其他人是如何成熟使用的。进入页面后，您将获得授权，同时您的页面上会有一个浮动框提示您是否允许授权。如果您允许，它将开始向您发送推送通知。但是，当它关闭选项卡时，通知也会关闭，因为它在页面之前监听了卸载事件。functionaddOnBeforeUnload(e){FERD_NavNotice.notification.close();}if(window.attachEvent){window.attachEvent('onbeforeunload',addOnBeforeUnload);}else{window.addEventListener('beforeunload',addOnBeforeUnload,false);}兼容性说到兼容性，自然要降很多，各个浏览器的表现会有些许不同。几乎都是移动端的，还好PC端的大部分都能支持，IE除外。所以在使用之前，需要检查一下浏览器是否支持Notification。更多文章：https://github.com/lin-xin/blog
