HTML5 web通知API介绍

2015/04/17 · HTML5欧博国际平台， · 2
评论 ·
web通知

本文由 伯乐在线 –
ElvisKang
翻译，周进林
校稿。未经许可，禁止转载！
英文出处：www.sevensignature.com。欢迎加入翻译组。

在使用网页版Gmail的时候，每当收到新邮件，屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification
API，我们也可以轻松实现这样的功能。

使用HTML5的Notification API制作web通知的教程，html5notification

这篇文章主要介绍了使用HTML5的Notification
API制作web通知的教程,示例包括需要使用到的相关CSS以及Javascript代码,需要的朋友可以参考下

在使用网页版Gmail的时候，每当收到新邮件，屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification
API，我们也可以轻松实现这样的功能。
确保浏览器支持

如果你在特定版本的浏览器上进行开发，那么我建议你先到 caniuse
查看浏览器对Notification
API的支持情况，避免你将宝贵时间浪费在了一个无法使用的API上。
如何开始
 

JavaScript Code复制内容到剪贴板

1. var notification=new Notification(‘Notification Title’,{  
2.     body:’Your Message’   
3. });   
4.   

上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题，而第二个参数则是一个option
对象，该对象可设置以下属性：

•     body ：设置通知栏的正文内容。
      dir
  ：定义通知栏文本的显示方向，可设为auto（自动）、ltr（从左到右）、rtl（从右到左）。
      lang
  ：声明通知栏内文本所使用的语种。（译注：该属性的值必须属于BCP 47
  language tag。）
      tag：为通知栏分配一个ID值，便于检索、替换或移除通知栏。
      icon ：设置作为通知栏icon的图片的URL

获取权限

在显示通知栏之前需向用户申请权限，只有用户允许，通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值：

•    
  default：用户处理结果未知，因此浏览器将视为用户拒绝弹出通知栏。（“浏览器：你没要求通知，我就不通知你了”）
      denied：用户拒绝弹出通知栏。（“用户：从我的屏幕里滚开”）
     
  granted：用户允许弹出通知栏。（“用户：欢迎！我很高兴能够使用这个通知功能”）
     
     

JavaScript Code复制内容到剪贴板

1. Notification.requestPermission(function(permission){   
2.     //display notification here making use of constructor
     
3.     });   
4.   

用HTML创建一个按钮
 

XML/HTML Code复制内容到剪贴板

1. <button id=”button”>Read your notification</button>  
2.   

不要忘记了CSS
 

CSS Code复制内容到剪贴板

1. #button{   
2.   font-size:1.1rem;   
3.   width:200px;   
4.   height:60px;   
5.   border:2px solid #df7813;   
6.   border-radius:20px/50px;   
7.   background:#fff;   
8.   color:#df7813;   
9. }   
10. #button:hover{   
11.   background:#df7813;   
12.   color:#fff;   
13.   transition:0.4s ease;   
14. }   
15.   

全部的Javascript代码如下：
 

JavaScript Code复制内容到剪贴板

1. document.addEventListener(‘DOMContentLoaded’,function(){   
2.         document.getElementById(‘button’).addEventListener(‘click’,function(){   
3.             if(! (‘Notification’ in window) ){   
4.                 alert(‘Sorry bro, your browser is not good enough to display notification’);
     
5.                 return;   
6.             }       
7.             Notification.requestPermission(function(permission){   
8.                 var config = {   
9.                               body:’Thanks for clicking that button. Hope you liked.’,
     
10.                               icon:”,
      
11.                               dir:’auto’  
12.                               };   
13.                 var notification = new Notification(“Here I am!”,config);   
14.             });   
15.         });   
16.     });   
17.   

从这段代码可以看出，如果浏览器不支持Notification
API，在点击按钮时将会出现警告“兄弟，很抱歉。你的浏览器并不能很好地支持通知功能”（Sorry
bro, your browser is not good enough to display
notification）。否则，在获得了用户的允许之后，我们自制的通知栏便可以出现在屏幕当中啦。

为什么要让用户手动关闭通知栏？

对于这个问题，我们可以借助setTimeout函数设置一个时间间隔，使通知栏能定时关闭。
 

JavaScript Code复制内容到剪贴板

1. var config = {   
2.                body:’Today too many guys got eyes on me, you did the same thing. Thanks’,
     
3.                icon:’icon.png’,   
4.                dir:’auto’  
5.              }   
6. var notification = new Notification(“Here I am!”,config);   
7. setTimeout(function(){   
8.     notification.close(); //closes the notification   
9. },5000);   
10.   

该说的东西就这些了。如果你意犹未尽，希望更加深入地了解Notification
API，可以阅读以下的页面：

    MDN
    Paul lund’s tutorial on notification API

在CodePen上查看demo

你可以在CodePen上看到由Prakash （@imprakash）编写的demo。

API制作web通知的教程，html5notification
这篇文章主要介绍了使用HTML5的Notification
API制作web通知的教程,示例包括需要使用到…

点评：HTML5中的桌面提醒（web
notifications）可以在当前页面窗口弹出一个消息框，这个消息框是跨Tab
窗口的，这在用户打开多个 tab 浏览网页时，提醒比较方便，容易让用户看到

HTML5实现Notification API桌面通知功能，html5notification

为什么需要HTML5的桌面通知
传统的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用京东
进行购物的时候，我是不知道人人网有消息推送过来给我的，而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的，
但是我们需要这么一种策略：无论你在看哪个页面，只要有消息都应该能推送给我看到，这就是webkitNotification要解决的问题。
Notification生成的消息不依附于某个页面，仅仅依附于浏览器。
一个桌面通知生成的正常流程 我们先来看看一个桌面通知是如何生成的：
1.检查浏览器是否支持Notification
2.检查浏览器的通知权限（是否允许通知）
3.若权限不够则获取浏览器的通知权限
4.创建消息通知
5.展示消息通知
NOTE:关于第一点的说明需要做一些说明，Notification目前还没有标准化，所以目前只支持chrome19+和safari6+；网上有资料显示Firefox26+也支持，但是我拿我的Firefox27检测的结果是无法支持。
html5的桌面通知我相信大家并不陌生。常见的有网页版的微信等应用，需要设置桌面通知功能才可以使用。
用客户端程序实现这样的功能并不难。而传统的网页版的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用淘宝进行购物的时候，我是不知道微博有消息推送过来给我的，而必须要等我把当前页面切到新浪微博才知道有消息推送了。这种方式的消息推送它是基于页面存活的，
但是我们需要这么一种策略：无论你在看哪个页面，只要有消息都应该能推送给我看到，这就是webkitNotification要解决的问题。
Notification目前还没有标准化，所以你在w3cschool等网站上是学习不到的。但是目前主流浏览器大部分都支持Notification。关于html5的桌面通知效果图如下：

 
代码如下：
XML/HTML Code复制内容到剪贴板

1. <!DOCTYPE html>    
2. <html>    
3. <head>    
4. <meta charset=”utf-8″> 
     
5. <title>html5桌面通知</title>    
6. </head>    
7. <body>    
8. <input type=”button” value=”开启桌面通知” onclick=”showNotice();”>    
9. <script>    
10. function showNotice(){    
11. Notification.requestPermission(function(status){    
12. //status默认值’default’等同于拒绝 ‘denied’ 意味着用户不想要通知 ‘granted’ 意味着用户同意启用通知 
      
13. if(“granted” != status)    
14. return;    
15. var notify = new Notification(“消息”,{    
16. dir:’auto’,    
17. lang:’zh-CN’,    
18. tag:’sds’,//实例化的notification的id    
19. //icon 支持ico、png、jpg、jpeg格式    
20. icon:’    
21. body:’html5桌面通知’ //通知的具体内容    
22. });    
23. notify.onclick=function(){    
24. //如果通知消息被点击,通知窗口将被激活    
25. window.focus();    
26. }    
27. });    
28. }    
29. </script>    
30. </body>    
31. </html> 

以上内容是小编给大家分享的HTML5实现Notification
API桌面通知功能，希望对大家有所帮助！
原文：

API桌面通知功能，html5notification 为什么需要HTML5的桌面通知
传统的桌面通知可以写一个div放到页面右下角自动弹出来，并…

确保浏览器支持

如果你在特定版本的浏览器上进行开发，那么我建议你先到
caniuse
查看浏览器对Notification
API的支持情况，避免你将宝贵时间浪费在了一个无法使用的API上。

HTML5中的桌面提醒（web
notifications）可以在当前页面窗口弹出一个消息框，这个消息框是跨 Tab
窗口的，这在用户打开多个 tab
浏览网页时，提醒比较方便，容易让用户看到。目前只要是 webkit
内核支持该功能。
该功能在 chrome 下需要以 http 方式打开网页才能启用。
桌面提醒功能由 window.webkitNotifications 对象实现（webkit内核）。
window.webkitNotifications 对象没有属性，有四个方法：
1.requestPermission()
　　该方法用于向用户申请消息提醒权限，如果当前没有开放该权限，浏览器将弹出授权界面，用户授权后，在对象内部产生一个状态值（一个0、1或
2 的整数）：
0：表示用户同意消息提醒，只在该状态下可以使用信息提醒功能；
1：表示默认状态，用户既未拒绝，也未同意；
2：表示用户拒绝消息提醒。
2.checkPermission() 　　这个方法用于获取 requestPermission() 申请到的权限的状态值。
3.createNotification()
　　这个方法以纯消息的方式创建提醒消息，它接受三个字符串参数：
iconURL：在消息中显示的图标地址,
title：消息的标题，
body：消息主体文本内容
该方法会返回一个 Notification对象，可以针对这个对象做更多的设置。
Notification 对象的属性与方法：