摘要：消息提示無(wú)非三種方式聲音提示，桌面彈窗和閃爍提醒。聲音提示注意聲音提示前提示已經(jīng)加載了聲音文件，有文章寫(xiě)的很多是臨時(shí)一個(gè)對(duì)象，然后這樣做是非常不好的，因?yàn)槟忝看握{(diào)用聲音的時(shí)候都會(huì)去后臺(tái)請(qǐng)求一下這個(gè)聲音文件。所以先加載出來(lái)是最好的方法。

web消息提示無(wú)非三種方式：聲音提示，桌面彈窗和title閃爍提醒。下面做一一介紹。

注意聲音提示前提示已經(jīng)加載了聲音文件，有文章寫(xiě)的很多是臨時(shí)create一個(gè)audio對(duì)象，然后audio.src,這樣做是非常不好的，因?yàn)槟忝看握{(diào)用聲音的時(shí)候都會(huì)去后臺(tái)請(qǐng)求一下這個(gè)聲音文件。所以先加載出來(lái)是最好的方法。

function playAudio() {
    document.getElementById("chat-audio").play(); 
    //pause()方法也可以暫停，具體可查html5的audio標(biāo)簽
}
//調(diào)用方式
playAudio();

function palyDeskNotice(theTitle, options) {
    if (Notification.permission !== "granted") {
        //先判斷一下用戶(hù)是否已經(jīng)開(kāi)啟了桌面提示的權(quán)限，如果沒(méi)有則提醒用戶(hù)開(kāi)啟
        window.Notification.requestPermission(function(permission) {
            if (permission === "granted") showNotice(theTitle, options);
        });
    } else {
        showNotice(theTitle, options);
    }
}
 
function showNotice(theTitle, options) {
        //這個(gè)就是桌面彈窗
    var desknotice = new Notification(theTitle, options);
    desknotice.onclick = function() {
        //當(dāng)用戶(hù)點(diǎn)擊彈窗的時(shí)候，要定位到聊天窗口
        window.focus();
        desknotice.close();
    };
    //頁(yè)面退出時(shí)關(guān)閉提醒
    window.onbeforeunload = function() {
        desknotice.close();
    }
    //彈窗3秒后自動(dòng)消失
    setTimeout(desknotice.close.bind(desknotice), 3000);
}
//調(diào)用方式
palyDeskNotice("來(lái)自xxx", {
    body: "內(nèi)容",
    icon: "images/xxx.jpg"
});

var NewMsgNoticeflag = false,//閃爍標(biāo)識(shí)
    newMsgNotinceTimer = null;
 
function newMsgCount() {
    if (NewMsgNoticeflag) {
        NewMsgNoticeflag = false;
        document.title = "【?新消息】您有新的即時(shí)消息";
    } else {
        NewMsgNoticeflag = true;
        document.title = "【　　　】您有新的即時(shí)消息";
    }
}
//兼容性
var hiddenProperty = "hidden" in document 
? "hidden" : "webkitHidden" in document 
? "webkitHidden" : "mozHidden" in document 
? "mozHidden" : null;
 
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, "visibilitychange");
var onVisibilityChange = function() {
        if (!document[hiddenProperty]) {
            clearInterval(newMsgNotinceTimer);
            newMsgNotinceTimer = null;
            document.title = "beta-即時(shí)消息系統(tǒng)"; //窗口沒(méi)有消息的時(shí)候默認(rèn)的title內(nèi)容
        }
    }
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
//調(diào)用方式
if (!newMsgNotinceTimer) newMsgNotinceTimer = setInterval("newMsgCount()", 200);