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。。。