【HTML】HTML5中的Web Notification桌面通知
阿新 • • 發佈：2020-12-06
大家在做一些瀏覽器端的聊天功能的時候，或者在一些網站跟線上客服諮詢的時候，會看到一些訊息通知的提示，常見的有瀏覽器標籤頁的閃爍和螢幕右側的訊息通知。這裡簡單的介紹一下如何實現這樣的功能。
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、實現螢幕右側訊息通知
先直接貼出程式碼
<!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>
效果：
此時，只要當前頁面沒有關閉，不管你當前瀏覽的是其他頁面還是其他應用，有訊息通知時，螢幕右側都會出現訊息通知的彈框，點選訊息提示框，這會跳轉到訊息頁面。
注意：如果用的是Chrome瀏覽器的新版本，則必須是https協議，訊息通知方可有效（當然如果是自己做測試，在本機用本地ip，則無所謂http還是https），chrome的舊版本則沒有這一限制（具體到哪個版本為界限，就不清楚）
更多內容請參考這位大神https://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/