大家在做一些瀏覽器端的聊天功能的時候，或者在一些網站跟在線客服咨詢的時候，會看到一些消息通知的提示，常見的有瀏覽器標簽頁的閃爍和屏幕右側的消息通知。本篇博客就在這里簡單的介紹一下如何實現這樣的功能。
需要購買阿里雲產品和服務的，點擊此鏈接領取優惠券紅包，優惠購買哦，領取后一個月內有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07
1、實現標簽頁閃爍效果
實現的效果：
當前窗體失焦的時候，標題開始閃動，當前窗體獲取焦點的時候，則停止閃動。
注意：這里需要用到窗口的獲取焦點和失去焦點的方法，由於IE和其他Chrome及FireFox的區別，這里需要用到的方法就不一樣，具體是：
Chrome和FireFox瀏覽器是window的onfocus, onblur方法；而IE瀏覽器則是document的onfocusin, onfocusout方法
下面是代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽頁標題閃爍</title> </head> <body> <h2>瀏覽器窗體獲得焦點則停止標題閃爍通知+失去焦點則開啟標題閃爍通知</h2> <script> // 窗體失焦的時候，標題就會閃。 // 這里有一個小的知識點，就是瀏覽器窗體獲得焦點和失去焦點，Chrome和FireFox瀏覽器是window的onfocus, onblur方法；而IE瀏覽器則是document的onfocusin, onfocusout方法，因此有： var titleInit = document.title, isShine = true; setInterval(function() { var title = document.title; if (isShine == true) { if (/新/.test(title) == false) { document.title = '【你有新消息】'; } else { document.title = '【 】'; } } else { document.title = titleInit; } }, 500); // for Chrome and FireFox window.onfocus = function() { console.log(123); isShine = false; }; window.onblur = function() { isShine = true; }; // for IE document.onfocusin = function() { isShine = false; }; document.onfocusout = function() { isShine = true; }; </script> </body> </html>
在瀏覽器打開該頁面，再隨意打開其他一個標簽頁，測試效果如下：
2、實現屏幕右側消息通知
先直接貼出代碼吧
test2.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
<h2>測試消息通知</h2>
<script> window.onload = function () { suportNotify() } //判斷瀏覽器是否支持Web Notifications API function suportNotify(){ if (window.Notification) { // 支持 console.log("支持"+"Web Notifications API"); //如果支持Web Notifications API，再判斷瀏覽器是否支持彈出實例 showMess() } else { // 不支持 alert("不支持 Web Notifications API"); } } //判斷瀏覽器是否支持彈出實例 function showMess(){ setTimeout(function () { console.log('1：'+Notification.permission); //如果支持window.Notification 並且 許可不是拒絕狀態 if(window.Notification && Notification.permission !== "denied") { //Notification.requestPermission這是一個靜態方法，作用就是讓瀏覽器出現是否允許通知的提示 Notification.requestPermission(function(status) { console.log('2: '+status); //如果狀態是同意 if (status === "granted") { var m = new Notification('收到信息', { body: '這里是通知內容！你想看什么客官？', //消息體內容 icon:"images/img1.jpg" //消息圖片 }); m.onclick = function () {//點擊當前消息提示框后，跳轉到當前頁面 window.focus(); } } else{ alert('當前瀏覽器不支持彈出消息') } }); } },1000) } </script> </body> </html>
Notification.requestPermission這是一個靜態方法，作用就是讓瀏覽器出現是否允許通知的提示，在mac下，如圖所示：
點擊了允許后，則當前域名的網站就被允許在該電腦上出現通知彈框，以谷歌瀏覽器為例，這時依次點擊：設置——高級——內容設置——通知，就可以在允許下面看到剛才點擊了允許通知的站點的地址，如圖：
此時，localhost:63342站點就可以出現通知消息了（消息通知彈窗在Mac和windows兩個系統下可能出現的位置有些不一樣，自己設置的logo出現的位置也會有些不同），Mac的消息通知窗口是從屏幕右上角出來的（Windows應該是從右下角出來），效果如圖：
此時，只要當前頁面沒有關閉，不管你當前瀏覽的是其他頁面還是其他應用，有消息通知時，屏幕右側都會出現消息通知的彈框，點擊消息提示框，這會跳轉到消息頁面。
注意：如果用的是Chrome瀏覽器的新版本，則必須是https協議，消息通知方可有效（當然如果是自己做測試，在本機用本地ip，則無所謂http還是https），chrome的舊版本則沒有這一限制（具體到哪個版本為界限，就不清楚）
本篇博客也只是簡單的記錄一下如何實現這樣的消息通知效果，想了解更詳細的知識點，可以參考張鑫旭大神的博客：
http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/