javascript-瀏覽器消息提醒

如何讓用戶在瀏覽器最小化的狀態下也能及時的收到消息提醒呢？ 這個問題做爲webRd是要正面面對的. 大約可分兩種場景：一種是相似桌面通知的形式還有一種是相似QQ提醒(在系統任務欄閃爍隨後高亮);接下來分別研究下：

桌面提醒：

這個H5有個強大的API沒錯就是Notification, 沒聽過？ https://developer.mozilla.org/en-US/docs/Web/API/notification 先去了解下，很詳細;瀏覽器不一樣對其支持程度也不一樣，簡單講就是有兼容問題，而筆者要說的就是基於Notification的一款小類庫 https://github.com/ttsvetko/HTML5-Desktop-Notifications,其支持：IE9+、Safari六、Firefox、Chrome；好吧都是前輩的結晶，我就是個搬磚的，下面附一個簡單的小demo:

ps: 麼有用類庫, 就是練手用的..實際仍是用類庫吧； 

function _Notification(title,option){
    var Notification = window.Notification || window.mozNotification || window.webkitNotification;
    Notification.permission === "granted"?creatNotification(title, option):requestPermission(title, option);
    function creatNotification(title, option){
       var instance = new Notification(title, option);
        instance.onclick = function () {
            console.log('onclick');
        };
        instance.onerror = function () {
            console.log('onerror');
        };
        instance.onshow = function () {
            console.log('onshow');
        };
        instance.onclose = function () {
            console.log("close")
        }
    }
    function requestPermission(title, option){
        Notification.requestPermission(function(status) {
            status === "granted"?creatNotification(title, option):failNotification(title);
        });
    }
    function failNotification(title){
        var timer;
        return function(timer){
            var index = 0;
            clearInterval(timer);
            timer = setInterval(function() {
                if(index%2) {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【　　　】'+ title;
                }else {
                    document.head.getElementsByTagName("title")[0].innerHTML = '【新消息】'+ title;
                }
                index++;
                if(index > 20) {
                    clearInterval(timer);
                }
            }, 500);
        }(timer);
    }
}

任務欄提醒：

這個還真是個問題; 至於解決的終極方法目前筆者還沒研究明白;不過window.open 這種彈窗會觸發閃爍提醒, 但須要解決用戶禁止彈窗的狀況,能夠模擬from提交 || 超連接(a) || 利用瀏覽器冒泡;這幾種方法均可以解決大部分被攔截的狀況; 可這都不是筆者想要的;由於提示內容展現在彈窗中老是很差的,用戶很容易蒙圈，怎麼一有提示就多個標題欄呢...很煩,貌似內存溢出也能夠，不過這個就算了，除非腦子進水了...; 期待大神指點..；