rinald_未来往事

html5桌面消息通知

WEB前端
html5桌面通知,html5(Notification)桌面通知通知API接口,浏览器消息通知.

传统实现方式

常用方法1:页面右下角写个div层,页面定时ajax请求服务器数据,返回true,div层显示。
常用方法2:浏览器标题闪烁通知,示例demo:
  1. var titleInit = document.title, hasMsg = true;  
  2. setInterval(function() {  
  3.     var title = document.title;  
  4.     if (hasMsg == true) {  
  5.         if (/新/.test(title) == false) {  
  6.             document.title = '【你有新消息】';      
  7.         } else {  
  8.             document.title = '';  
  9.         }  
  10.     } else {  
  11.         document.title = titleInit;  
  12.     }  
  13. }, 500);  
  14.   
  15. // for firefox / chrome  
  16. window.onfocus = function() {  
  17.     hasMsg = false;  
  18. };  
  19. window.onblur = function() {  
  20.     hasMsg = true;  
  21. };  
  22.   
  23. // for IE  
  24. document.onfocusin = function() {  
  25.     hasMsg = false;  
  26. };  
  27. document.onfocusout = function() {  
  28.     hasMsg = true;  
  29. };  

上述方法在使用中你会发现这种提示有个严重的缺陷,就是需要用户的浏览器一直打开。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息。正是缺陷存在,所以新技术也会伴随这出现:Web Notification通知API接口

html5 Web Notification

HTML5 Web Notification通知是属于桌面性质的通知,有点类似于显示器右下角蹦出的QQ弹框,杀毒提示之类的,跟浏览器是脱离的,消息是置顶的。Notification生成的消息不依附于某个页面,仅仅依附于浏览器。如果你在特定版本的浏览器上进行开发,那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上,附图为兼容支持情况,但是我仍建议你去caniuse 查看最新的兼容支持:
点击在新窗口中浏览此图片

关于使用推荐你参考:
[html5] (Notification) 桌面通知
How To Use The HTML5 Notification API》,这里不再过多赘述。

demo参考:
http://codepen.io/imprakash/pen/ZYLayY/
https://paulund.co.uk/playground/demo/html5-notification-api/

示例图片:
点击在新窗口中浏览此图片

原文作者:rinald
原文地址:http://fity.cn/post/624.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。