HTML5 Notification實現瀏覽器通知
需求需要實現當瀏覽器最小化時，如果有新通知，實現瀏覽器閃爍，或者實在不行在瀏覽器標題欄閃爍（這個似乎相當於沒有通知。。）。基於技術研究的目的，在網路上查詢有沒有相關實現方式，發現，大多不是真正的實現工作列閃爍，似乎純js無法實現，還需要win32底層API的支援。。。無奈轉而研究能不能折中通過彈框的方式通知。發現可以通過HTML的Notification API實現，下面先介紹簡單的瀏覽器標題欄閃爍的方式，畢竟也有一些應用場景。
一、瀏覽器標題欄閃爍
實際上就是基於document的title屬性，在接收到新訊息時，判斷焦點是否在當前頁面來決定是否閃爍瀏覽器頁面通知欄的，如果這時瀏覽器最小化當然也就看不到這個閃爍通知了。
下面模擬這個場景，定義一個變數儲存是否獲取焦點，然後通過定時器，迴圈判斷這個變數，如果獲取焦點就不設定標題，如果沒獲取到焦點就迴圈修改title值達到閃爍的目的：
<html> <head> <title>位址列閃爍</title> <script type="text/javascript"> var isShine = true; //Chrome/FireFox window.onfocus = function() { isShine = false; }; window.onblur = function() { isShine = true; }; //IE document.onfocusin = function() { isShine = false; }; document.onfocusout = function() { isShine = true; }; debugger; //儲存原始title，便於還原 var defaultTitle = document.title setInterval(function() { var title = document.title; //判斷是否獲取焦點 if (isShine == true) { //如果沒有獲取焦點就判斷名稱是否包含未讀訊息 if (/未讀訊息/.test(title) == false) { //如果包含就顯示為空 document.title = '【未讀訊息】'; } else { //否則顯示未讀訊息，間隔0.5秒實現閃爍 document.title = '【 】'; } } else { //如果獲取到焦點就不閃爍，使用元素標題 document.title = defaultTitle; } }, 500); </script> </head> <body> 測試瀏覽器標題欄閃爍 </body> </html>
二、使用HTML5 Web Notification桌面通知
對於B/S程式另一種折中且不錯的通知方式是使用HTML5 Notification API實現桌面彈窗的通知。語法可以參考https://developer.mozilla.org/en-US/docs/Web/API/notification
1、例項化Notification物件
建構函式結構如下：
function spawnNotification(theBody,theIcon,theTitle) { var options = { body: theBody, icon: theIcon } var n = new Notification(theTitle,options); }
其中引數theBody是訊息通知的正文，theTitle是訊息通知的標題，theIcon是顯示的圖示。
Notification 物件有許多靜態屬性，比較常用的比如Notification.permission是隻讀屬性，有三個值：
- denied — 使用者拒絕顯示通知；
- granted — 使用者允許顯示通知；
- default — 使用者不知情，所以認為是拒絕。
2、Notification屬性值
例項化Notification 物件時還有許多隻讀引數，上面列出的theTitle是必選引數，options物件裡面的是可選引數，可以針對不同場景使用，比如：
body—示在標題下面的正文內容；
icon—字串型別，通知彈框左側顯示的圖示地址；
dir—預設值是auto, 可以是ltr或rtl，通知正文的水平書寫順序；
renotify—布林值。新通知出現的時候是否替換之前的。預設false，表示從下到上層疊顯示，如果設為true，則表示替換，當前的通知只會出現一個。設為true時，必須同時設定tag屬性值。
silent—布林值，通知出現的時候，是否要有聲音，預設false, 表示無聲。
sound—字串，音訊地址，表示通知出現要播放的聲音。
3、Notification例項方法
Notification包含一些事件處理方法，例如：
當用戶每次觸發點選事件時執行，格式：
Notification.onclick = function(event) { ... };當用戶點選通知時開啟新頁面：
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://www.mozilla.org', '_blank');
}
2）Notification.onclose
當用戶關閉通知時觸發事件，如果不手動關閉通知，過一段時間也會自動關閉。
Notification.onclose = function() { ... };3）Notification.onerror
通知顯示異常時觸發，比如當無權顯示通知時顯示通知。
Notification.onerror = EventListener;4、例項程式碼
function showNotification(){
//判斷瀏覽器是否支援Notification物件
debugger;
var isFocus = true;
//Chrome/FireFox
window.onfocus = function() {
isFocus = true;
};
window.onblur = function() {
isFocus = false;
};
//IE
document.onfocusin = function() {
isFocus = true;
};
document.onfocusout = function() {
isFocus = false;
};
if(window.Notification){
$("#btn").on('click',function(){
if(!isFocus){
//判斷是否有許可權顯示通知
if(Notification.permission=="granted"){
pushNotice();
}else if(Notification.permission!="denied"){
//如果不是拒絕顯示通知就請求允許顯示通知
Notification.requestPermission(function(permission){
pushNotice();
});
}
}
});
}else{
$.alert({
title: '資訊',
content: '瀏覽器不支援桌面通知'
});
}
}
function pushNotice(){
//判斷是否有顯示通知的許可權
if(Notification.permission=="granted"){
//初始化通知物件
var options = {
body: "您有新的未讀訊息"
}
var notice = new Notification("通知",options);
}
}
測試通過判斷視窗是否失去焦點來決定是否顯示通知，發現在頁面存在一些操作的情況下，導致錯誤觸發foucus和blur方法，因此決定換一種方式，後來發現有一個document.hidden屬性表示頁面是（true）否（false）隱藏。因此改為通過判斷這個屬性來判斷視窗是否隱藏決定是否顯示通知。
本地測試成功後在測試伺服器上測試，由於使用的是Chrome瀏覽器，而部署的應用是http的，Chrome從v68開始要求網站使用https協議，如果不是的話會顯示不安全，導致Notification無法使用。。。因此如果是使用的Chrome瀏覽器，想要使用Notification API，必須將應用升級成https。。。