javascript-瀏覽器訊息提醒

標籤：val   瞭解   溢出   click   超連結   https   相容   head   rom   

如何讓使用者在瀏覽器最小化的狀態下也能及時的收到訊息提醒呢？ 這個問題作為webRd是要正面面對的. 大約可分兩種情境：一種是類似案頭通知的形式還有一種是類似QQ提醒(在系統工作列閃爍隨後高亮);接下來分別研究下：

案頭提醒：

這個H5有個強大的API沒錯就是Notification, 沒聽過？ https://developer.mozilla.org/en-US/docs/Web/API/notification 先去瞭解下，很詳細;瀏覽器不同對其支援程度也不同，簡單講就是有相容問題，而筆者要說的就是基於Notification的一款小類庫 https://github.com/ttsvetko/HTML5-Desktop-Notifications,其支援：IE9+、Safari6、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) || 利用瀏覽器冒泡;這幾種方法都可以解決大部分被攔截的情況; 可這都不是筆者想要的;因為提示內容展示在彈窗中總是不好的,使用者很容易蒙圈，怎麼一有提示就多個標題列呢...很煩,貌似記憶體溢出也可以，不過這個就算了，除非腦子進水了...; 期待大神指點..；

javascript-瀏覽器訊息提醒