2014/09/19 WEB前端 No Comments 浏览器Notification消息通知API 浏览器消息提示,浏览器Notification消息提示,html5桌面通知,html5(Notification)桌面通知通知API接口,浏览器消息通知. 传统实现方式常用方法1:页面右下角写个div层,页面定时ajax请求服务器数据,返回true,div层显示。常用方法2:浏览器标题闪烁通知,示例demo:var titleInit = document.title, hasMsg = true; setInterval(function() { var title = document.title; if (hasMsg == true) { if (/新/.test(title) == false) { document.title = '【你有新消息】'; } else { document.title = ''; } } else { document.title = titleInit; } }, 500); // for firefox / chrome window.onfocus = function() { hasMsg = false; }; window.onblur = function() { hasMsg = true; }; // for IE document.onfocusin = function() { hasMsg = false; }; document.onfocusout = function() { hasMsg = true; }; 上述方法在使用中你会发现这种提示有个严重的缺陷,就是需要用户的浏览器一直打开。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息。正是缺陷存在,所以新技术也会伴随这出现:Web Notification通知API接口。html5 Web NotificationHTML5 Web Notification通知是属于桌面性质的通知,有点类似于显示器右下角蹦出的QQ弹框,杀毒提示之类的,跟浏览器是脱离的,消息是置顶的。Notification生成的消息不依附于某个页面,仅仅依附于浏览器。如果你在特定版本的浏览器上进行开发,那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上,附图为兼容支持情况,但是我仍建议你去caniuse 查看最新的兼容支持:关于使用推荐你参考:《[html5] (Notification) 桌面通知》《How To Use The HTML5 Notification API》,这里不过多赘述。demo参考: ```javascript 点击测试消息通知 ``` 示例图片: 本文最后更新于 2014-09-19 00:10:00 并被添加「html5」标签,已有 4023 位童鞋阅读过。 本文作者:未来往事 本文链接:https://felixway.cn/post/624.html 本站使用「署名 4.0 国际」创作共享协议,可自由转载、引用,但需署名作者且注明文章出处
此处评论已关闭