html5桌面消息通知

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/

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

此处评论已关闭

© 2011 - 2019 未来往事  皖ICP备13018850号

我愿像茶一样,把苦涩留在心底,散发出来的都是清香。