html5 桌面提示:Notifycations应用介绍

HTML5 web通知API介绍

2015/04/17 · HTML5 · 2
评论 ·
web通知

本文由 伯乐在线 –
ElvisKang
翻译,周进林
校稿。未经许可,禁止转发!
英文出处:www.sevensignature.com。欢迎参预翻译组。

图片 1

在动用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提醒框。借助HTML伍提供的Notification
API,大家也足以轻松达成如此的功效。

采纳HTML5的Notification API制作web公告的学科,html5notification

那篇小说首要介绍了运用HTML伍的Notification
API制作web公告的学科,示例包涵须求选拔到的相关CSS以及Javascript代码,供给的意中人能够参见下

在动用网页版Gmail的时候,每当收到新邮件,显示屏的右下方都会弹出相应的提醒框。借助HTML5提供的Notification
API,我们也能够轻松实现那样的成效。
管教浏览器协助

万1你在特定版本的浏览器上拓展付出,那么笔者建议你先到 caniuse
查看浏览器对Notification
API的辅助意况,幸免你将难得时间浪费在了贰个无法运用的API上。
怎么样早先
 

JavaScript Code复制内容到剪贴板

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

上边的代码构造了三个简陋的公告栏。构造函数的率先个参数设定了布告栏的题目,而第叁个参数则是3个option
对象,该目的可设置以下属性:

  •     body :设置文告栏的正文内容。
        dir
    :定义公告栏文本的体现方向,可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。
        lang
    :表明布告栏内文本所使用的语种。(译注:该属性的值必须属于BCP 47language tag。)
        tag:为通知栏分配1个ID值,便于寻找、替换或移除布告栏。
        icon :设置作为布告栏icon的图片的U本田UR-VL

获取权力

在展示文告栏以前需向用户申请权限,只有用户同意,公告栏才可出现在显示屏中。对权力申请的处理将有以下再次来到值:

  •    
    default:用户处理结果未知,因而浏览器将视为用户拒绝弹出文告栏。(“浏览器:你没须要关照,笔者就不通告你了”)
        denied:用户拒绝弹出布告栏。(“用户:从自家的显示器里滚开”)
       
    granted:用户同意弹出公告栏。(“用户:欢迎!笔者很洋洋得意能够使用那几个通告功用”)
       
       

JavaScript Code复制内容到剪贴板

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

用HTML创立2个按钮
 

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通知的科目,html五notification
那篇小说首要介绍了选取HTML伍的Notification
API制作web通告的课程,示例包蕴需要选择到…

点评:HTML5中的桌面提示(web
notifications)能够在最近页面窗口弹出三个新闻框,这一个消息框是跨Tab
窗口的,这在用户打开多少个 tab 浏览网页时,提醒相比较便利,不难让用户观察

HTML伍兑现Notification API桌面通告功效,html伍notification

缘何需求HTML5的桌面通告
历史观的桌面公告能够写一个div放到页面右下角自动弹出来,并通过轮询等等其他方法去得到音讯并推送给用户。那种办法有个弊端便是:当自己在利用京东
举办购物的时候,作者是不领悟人们网有新闻推送过来给小编的,而必要求等作者把当前页面切到人们网才精晓有消息推送了。那种办法的音信推送它是基于页面存活的,
不过我们须求那样一种政策:无论你在看哪个页面,只要有消息都应有能推送给笔者见状,那正是webkitNotification要消除的题材。
Notification生成的音信不依附于某些页面,仅仅依附于浏览器。
多个桌面文告生成的平常流程 我们先来看望1个桌面公告是什么变迁的:
1.检查浏览器是还是不是扶助Notification
二.检查浏览器的布告权限(是不是同意通告)
三.若权力不够则得到浏览器的关照权限
四.创办新闻公告
5.出示信息文告
NOTE:关于率先点的证实须要做一些认证,Notification近年来还不曾标准化,所以方今只协助chrome19+和safari6+;网上有资料彰显Firefox二陆+也匡助,不过本人拿自家的Firefox2柒检测的结果是无能为力支撑。
html5的桌面文告笔者深信不疑大家并不素不相识。常见的有网页版的微信等选择,要求设置桌面文告功用才能够运用。
用客户端程序达成那样的职能并简单。而守旧的网页版的桌面通告能够写三个div放到页面右下角自动弹出来,并透过轮询等等别的方法去获取音信并推送给用户。那种方法有个弊端正是:当自身在使用Tmall进行购物的时候,作者是不通晓天涯论坛有消息推送过来给本身的,而必供给等自笔者把当前页面切到天涯论坛新浪才知道有音讯推送了。那种方式的信息推送它是基于页面存活的,
然则大家要求那样一种政策:无论你在看哪个页面,只要有音讯都应有能推送给本人看看,那正是webkitNotification要化解的题材。
Notification目前还并未有标准化,所以您在w3cschool等网站上是学习不到的。然而当前主流浏览器超过一半都支持Notification。关于html5的桌面布告效果图如下:

图片 2

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

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset=”utf-8″> 
      
  5. <title>html伍桌面公告</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:’html伍桌面通告’ //文告的具体内容    
  22. });    
  23. notify.onclick=function(){    
  24. //要是文告新闻被点击,文告窗口将被激活    
  25. window.focus();    
  26. }    
  27. });    
  28. }    
  29. </script>    
  30. </body>    
  31. </html> 

上述内容是作者给大家大饱眼福的HTML5兑现Notification
API桌面通告功用,希望对大家有所协助!
原文:

API桌面文告作用,html五notification 为啥要求HTML伍的桌面通知古板的桌面布告能够写多少个div放到页面右下角自动弹出来,并…

保证浏览器协理

假诺你在特定版本的浏览器上拓展支付,那么小编建议你先到
caniuse
查看浏览器对Notification
API的支撑景况,防止你将难得时间浪费在了贰个不可能运用的API上。

HTML5中的桌面提示(web
notifications)能够在现阶段页面窗口弹出二个音讯框,那几个新闻框是跨 Tab
窗口的,那在用户打开四个 tab
浏览网页时,提示相比方便,不难让用户阅览。如今一经是 webkit
内核帮忙该意义。
该功效在 chrome 下必要以 http 情势打开网页才能启用。
桌面提醒功用由 window.webkitNotifications 对象达成(webkit内核)。
window.webkitNotifications 对象未有品质,有多少个办法:
1.requestPermission()
  该方法用于向用户申请音讯提示权限,借使当前并未有开放该权限,浏览器将弹出授权界面,用户授权后,在指标内部发生二个状态值(1个0、1或
贰 的整数):
0:表示用户同意新闻提醒,只在该地方下能够使用音讯提示成效;
1:表示私下认可状态,用户既未拒绝,也未同意;
二:表示用户拒绝音信提醒。
2.checkPermission()   这些方法用于获取 requestPermission() 申请到的权杖的图景值。
3.createNotification()
  这几个主意以纯新闻的秘籍开创提示新闻,它承受八个字符串参数:
iconUPRADOL:在信息中展现的图标地址,
title:音讯的标题,
body:新闻主体文本内容
该方法会重返八个 Notification对象,能够本着这一个指标做更加多的装置。
Notification 对象的质量与方法:

相关文章