言

Notification API 是 HTML5 新增的桌面通知 API，用于向用户显示通知信息。该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，该通知信息也一样会置顶显示出来。

用户权限

想要向用户显示通知消息，需要获取用户权限，而相同的域名只需要获取一次权限。只有用户允许的权限下，Notification 才能起到作用，避免某些网站的广告滥用 Notification 或其它给用户造成影响。那么如何知道用户到底是允不允许的？

Notification.permission 该属性用于表明当前通知显示的授权状态，可能的值包括：

• default ：不知道用户的选择，默认。granted ：用户允许。denied ：用户拒绝。

if(Notification.permission==='granted'){
 console.log('用户允许通知');
}else if(Notification.permission==='denied'){
 console.log('用户拒绝通知');
}else{
 console.log('用户还没选择，去向用户申请权限吧');
}

请求权限

当用户还没选择的时候，我们需要向用户去请求权限。Notification 对象提供了 requestPermission() 方法请求用户当前来源的权限以显示通知。

以前基于回调的语法已经弃用（当然在现在的浏览器中还是能用的），最新的规范已将此方法更新为基于 promise 的语法：

Notification.requestPermission().then(function(permission) {
 if(permission==='granted'){
 console.log('用户允许通知');
 }else if(permission==='denied'){
 console.log('用户拒绝通知');
 }
});

推送通知

获取用户授权之后，就可以推送通知了。

var notification=new Notification(title, options)

参数如下：

• title：通知的标题options：通知的设置选项（可选）。
• body：通知的内容。tag：代表通知的一个识别标签，相同tag时只会打开同一个通知窗口。
• icon：要在通知中显示的图标的URL。
• image：要在通知中显示的图像的URL。
• data：想要和通知关联的任务类型的数据。
• requireInteraction：通知保持有效不自动关闭，默认为false。

还有一些其他的参数，因为用不了或者没什么用这里就没必要说了。

var n=new Notification('状态更新提醒',{
 body: '你的朋友圈有3条新状态，快去查看吧',
 tag: 'linxin',
 icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
 requireInteraction: true
})

通知消息的效果图如下：

关闭通知

从上面的参数可以看出，并没有一个参数用来配置显示时长的。我想要它 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);
}

兼容

说到兼容，自然是倒下一大片，而且各浏览器的表现也会有点差异。移动端的几乎全倒，PC端的还好大多都能支持，除了IE。所以使用前，需要先检查一下浏览器是否支持 Notification。

方的冬天最怕有风，空气虽然好了，但是异常的冷，吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题，看了几个网站发现很多网站的弹窗都是自定义的，而且还把弹窗周围的区域做成了半透明状，看上去非常不错。于是小白也准备自己通过css布局一个弹窗试试，一来以后肯定会用上这个功能，二来熟悉一下最近掌握的CSS+HTML布局。

说干就干，小白打开webStrom做起了弹窗的布局。他首先用一个容器layer作为弹窗的容器，然后里面放了窗口容器（dialog），窗口容器里面还包含了三个子容器，分别是标题（layerTitle）、内容区域（layerContent）、按钮区域（layerBTContainer）。

小白想：“layer要充满并遮挡整个浏览器窗口，而且滚动页面它还得一直保持遮挡的状态，把它设置为浮动类型（position:fixed）的容器最合适。里面的dialog需要保持在浏览器的最中心位置，因此最好把dialog设置成固定宽度和高度，这样可以很好的实现居中。”，于是小白先把layer和dialog以及dialog内部的容器设定了一个初步的CSS样式。

layer的position设置为fixed，上下左右距离都设置成0，就可以达到占用整个窗口。里面的dialog容器小白根据刚学习的CSS溢出法让dialog上下都居中。dialog如果是绝对定位，设置上下左右距离都为0它会占用整个父容器区域，但是如果CSS中限制了dialog的宽和高并且设置了marin为auto，它就会基于父容器居中。

为了测试transition属性，小白还把确定按钮上面设置了一个鼠标移上去以后渐变的效果，做完以后就是这个样子：

看到布局好的弹窗小白心里非常高兴，突然他想到一个问题，这个弹窗背景还没设置半透明，于是赶紧往layer上增加了opacity:0.5这个半透明属性，小白满怀信息的刷新了页面，当看到结果时小白发现背景和窗口都变成了半透明。

正好这时老朱从小白身边经过，随口跟小白说了一句：“小白，你是不是把窗口的父容器设置成半透明了？”

“是啊！父容器背景是黑色，所以我把父容器设置成了半透明！”

“可是父容器设置半透明会对他的子元素产生影响啊，这样会导致它里面的所有元素都变成半透明，你为啥不给窗口添加一个兄弟容器来实现这个效果呢？”

小白仔细想了想，说道：“哦！我明白了，我可以在layer容器里面放一个跟layer一样大的容器，这样就不会冲突了，我再试试！”

不一会小白找到老朱，说道：“我改好了，现在我给dialog添加了一个layerbg容器作为背景层，然后把layer之前的背景色和透明度去掉，放到了新增加的背景层上面，背景层高和宽与layer一样所以这样就不会把dialog也变成半透明了。你看看效果。”

老朱说：“嗯！不错，你现在通过HTML和CSS布局的这个弹窗还能做很多完善，比如出现弹窗时增加一个动画效果、给它添加一个关闭按钮或者取消按钮等等。除了提示功能以外，你现在做的这个还能再进行深入修改，把它变成可以输入文字的prompt框，点击确定以后可以对页面或者数据库数据进行修改。”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

网页设计过程中，我们会经常用到一些HTML5特效代码，下面就是为大家整理分享的一些好看炫酷且实用的HTML5特效代码，可以放心在您的应用程序中使用。

一、Canvas跟随鼠标光标动画特效

演示、下载地址：http://www.php.cn/xiazai/js/845

二、HTML5 Canvas泡泡悬浮鼠标特效

演示、下载地址：http://www.php.cn/xiazai/js/1599

三、HTML5卡通可爱风格网页找不到404错误页面网页模板

演示、下载地址：http://www.php.cn/xiazai/js/2987

四、HTML5-Canvas线条背景动画

演示、下载地址：http://www.php.cn/xiazai/js/2930

五、HTML5-Canvas线条背景动画

演示、下载地址：http://www.php.cn/xiazai/js/2919

六、HTML5-Canvas五彩纸屑飘落动画特效

演示、下载地址：http://www.php.cn/xiazai/js/2917

更多炫酷html5、javascript特效代码，尽在：js特效大全

以上就是html5精选特效代码分享（收藏）的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！