web音讯提示不过三种体式格局：声响提示，桌面弹窗和title闪灼提示。下面做逐一引见。

声响提示

注重声响提示前提示已加载了声响文件，有文章写的很多是暂时create一个audio对象，然后audio.src,如许做是异常不好的，由于你每次挪用声响的时刻都会去背景要求一下这个声响文件。所以先加载出来是最好的要领。

<audio id="chat-audio" src="audio/system.wav" display="none"></audio>

function playAudio() {
    document.getElementById('chat-audio').play(); 
    //pause()要领也能够停息，详细可查html5的audio标签
}
//挪用体式格局
playAudio();

桌面弹窗

function palyDeskNotice(theTitle, options) {
    if (Notification.permission !== "granted") {
        //先推断一下用户是不是已开启了桌面提示的权限，假如没有则提示用户开启
        window.Notification.requestPermission(function(permission) {
            if (permission === "granted") showNotice(theTitle, options);
        });
    } else {
        showNotice(theTitle, options);
    }
}
 
function showNotice(theTitle, options) {
        //这个就是桌面弹窗
    var desknotice = new Notification(theTitle, options);
    desknotice.onclick = function() {
        //当用户点击弹窗的时刻，要定位到谈天窗口
        window.focus();
        desknotice.close();
    };
    //页面退出时封闭提示
    window.onbeforeunload = function() {
        desknotice.close();
    }
    //弹窗3秒后自动消逝
    setTimeout(desknotice.close.bind(desknotice), 3000);
}
//挪用体式格局
palyDeskNotice('来自xxx', {
    body: '内容',
    icon: "images/xxx.jpg"
});

title闪灼提示的道理

var NewMsgNoticeflag = false,//闪灼标识
    newMsgNotinceTimer = null;
 
function newMsgCount() {
    if (NewMsgNoticeflag) {
        NewMsgNoticeflag = false;
        document.title = '【☏新音讯】您有新的即时音讯';
    } else {
        NewMsgNoticeflag = true;
        document.title = '【　　　】您有新的即时音讯';
    }
}
//兼容性
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-即时音讯体系'; //窗口没有音讯的时刻默许的title内容
        }
    }
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
//挪用体式格局
if (!newMsgNotinceTimer) newMsgNotinceTimer = setInterval("newMsgCount()", 200);