2014/09/19 WEB前端 No Comments 浏览器Notification消息通知API 浏览器消息提示,浏览器Notification消息提示,html5桌面通知,html5(Notification)桌面通知通知API接口,浏览器消息通知. <br/><span id="menu_index_1" name="menu_index_1"></span><h4>传统实现方式</h4><strong>常用方法1</strong>：页面右下角写个div层，页面定时ajax请求服务器数据，返回true，div层显示。<br/><strong>常用方法2</strong>：浏览器标题闪烁通知，示例demo：<pre class="prettyprint linenums prettyprinted"><ol start="1" class="linenums dp-c"><li class="alt"><span><span class="keyword">var</span><span> titleInit = document.title, hasMsg = </span><span class="keyword">true</span><span>; </span></span></li><li class=""><span>setInterval(<span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> title = document.title; </span></span></li><li class=""><span> <span class="keyword">if</span><span> (hasMsg == </span><span class="keyword">true</span><span>) { </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> (/新/.test(title) == </span><span class="keyword">false</span><span>) { </span></span></li><li class=""><span> document.title = <span class="string">'【你有新消息】'</span><span>; </span></span></li><li class="alt"><span> } <span class="keyword">else</span><span> { </span></span></li><li class=""><span> document.title = <span class="string">''</span><span>; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> } <span class="keyword">else</span><span> { </span></span></li><li class="alt"><span> document.title = titleInit; </span></li><li class=""><span> } </span></li><li class="alt"><span>}, 500); </span></li><li class=""><span> </span></li><li class="alt"><span><span class="comment">// for firefox / chrome</span><span> </span></span></li><li class=""><span>window.onfocus = <span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> hasMsg = <span class="keyword">false</span><span>; </span></span></li><li class=""><span>}; </span></li><li class="alt"><span>window.onblur = <span class="keyword">function</span><span>() { </span></span></li><li class=""><span> hasMsg = <span class="keyword">true</span><span>; </span></span></li><li class="alt"><span>}; </span></li><li class=""><span> </span></li><li class="alt"><span><span class="comment">// for IE</span><span> </span></span></li><li class=""><span>document.onfocusin = <span class="keyword">function</span><span>() { </span></span></li><li class="alt"><span> hasMsg = <span class="keyword">false</span><span>; </span></span></li><li class=""><span>}; </span></li><li class="alt"><span>document.onfocusout = <span class="keyword">function</span><span>() { </span></span></li><li class=""><span> hasMsg = <span class="keyword">true</span><span>; </span></span></li><li class="alt"><span>}; </span></li></ol></pre><br/>上述方法在使用中你会发现这种提示有个严重的缺陷，就是需要用户的浏览器一直打开。比方说用户浏览器最小化，标题就看不见，自然就无法及时get到有新消息的信息。正是缺陷存在，所以新技术也会伴随这出现：<strong>Web Notification通知API接口</strong>。<br/><br/><span id="menu_index_2" name="menu_index_2"></span><h4>html5 Web Notification</h4>HTML5 Web Notification通知是属于桌面性质的通知，有点类似于显示器右下角蹦出的QQ弹框，杀毒提示之类的，跟浏览器是脱离的，消息是置顶的。Notification生成的消息不依附于某个页面，仅仅依附于浏览器。如果你在特定版本的浏览器上进行开发，那么我建议你先到 <span class="fity-contentlink"><a href="http://caniuse.com/#search=notification" target="_blank" rel="nofollow">caniuse</a></span> 查看浏览器对Notification API的支持情况，避免你将宝贵时间浪费在了一个无法使用的API上，附图为兼容支持情况，但是我仍建议你去<span class="fity-contentlink"><a href="http://caniuse.com/#search=notification" target="_blank" rel="nofollow">caniuse</a></span> 查看最新的兼容支持：<br/><a href="https://www.fity.cn/usr/uploads/2017/05/1495124483_335041a3.png" target="_blank"><img src="https://www.fity.cn/usr/uploads/2017/05/1495124483_335041a3.png" class="insertimage" alt="点击在新窗口中浏览此图片" title="点击在新窗口中浏览此图片" border="0"/></a><br/><br/><strong>关于使用推荐你参考：</strong><br/>《<span class="fity-contentlink"><a href="https://segmentfault.com/a/1190000000663792" target="_blank" rel="nofollow">[html5] (Notification) 桌面通知</a></span>》<br/>《<span class="fity-contentlink"><a href="https://paulund.co.uk/html5-notifications" target="_blank" rel="nofollow">How To Use The HTML5 Notification API</a></span>》，这里不过多赘述。<br/><br/><strong>demo参考：</strong><br/> ```javascript <button onclick="remind()" style="margin:30px;">点击测试消息通知</button> <script> //触发消息通知https://www.fity.cn/post/624.html function remind() { var title = '消息标题'; var options = { body: '这是一条测试消息 来自：未来往事', icon: 'https://www.fity.cn/statics/img/gravatar.jpg' } if (!("Notification" in window)) { alert("您的浏览器不支持桌面通知"); }else if (Notification.permission === "granted") { //同意接受通知 则提示消息 var notification = new Notification(title, options); focustab(notification); }else if (Notification.permission !== "denied") { //获取授权 Notification.requestPermission().then(function (permission) { //如果同意接受通知 则提示消息 if (permission === "granted") { var notification = new Notification(title, options); focustab(notification); } }); } // 当执行到这里，表明用户已经拒绝对相关通知进行授权 } //打开通知notification的TAB窗口 function focustab(ths){ ths.onclick = function() { window.focus(); } } </script> ``` <br/><strong>示例图片：</strong><br/><a href="https://www.fity.cn/usr/uploads/2017/05/1495125892_1910ba81.png" target="_blank"><img src="https://www.fity.cn/usr/uploads/2017/05/1495125892_1910ba81.png" class="insertimage" alt="点击在新窗口中浏览此图片" title="点击在新窗口中浏览此图片" border="0"/></a><br/><br/> 本文最后更新于 2014-09-19 00:10:00 并被添加「html5」标签，已有 4038 位童鞋阅读过。 本文作者：未来往事 本文链接：https://felixway.cn/post/624.html 本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处
此处评论已关闭