Fai lampeggiare la finestra del browser nella barra delle applicazioni

Come faccio a far lampeggiare / lampeggiare / evidenziare il browser di un utente nella barra delle applicazioni utilizzando JavaScript? Ad esempio, se effettuo una richiesta AJAX ogni 10 secondi per vedere se l'utente ha nuovi messaggi sul server, voglio che l'utente lo sappia subito, anche se in quel momento sta utilizzando un'altra applicazione.

Modifica: questi utenti vogliono essere distratti quando arriva un nuovo messaggio.

questo non farà lampeggiare il pulsante della barra delle applicazioni cambiando i colori, ma il titolo lampeggerà finché non si sposta il mouse. Questo dovrebbe funzionare su più piattaforme e anche se lo hanno solo in una scheda diversa.

newExcitingAlerts = (function () {
    var oldTitle = document.title;
    var msg = "New!";
    var timeoutId;
    var blink = function() { document.title = document.title == msg ? ' ' : msg; };
    var clear = function() {
        clearInterval(timeoutId);
        document.title = oldTitle;
        window.onmousemove = null;
        timeoutId = null;
    };
    return function () {
        if (!timeoutId) {
            timeoutId = setInterval(blink, 1000);
            window.onmousemove = clear;
        }
    };
}());

Aggiornamento : potresti voler esaminare l'utilizzo delle notifiche HTML5 .

Ho creato un plug-in jQuery allo scopo di lampeggiare i messaggi di notifica nella barra del titolo del browser. Puoi specificare diverse opzioni come l'intervallo di lampeggiamento, la durata, se il lampeggiamento deve interrompersi quando la finestra / scheda viene messa a fuoco, ecc. Il plug-in funziona in Firefox, Chrome, Safari, IE6, IE7 e IE8.

Ecco un esempio su come usarlo:

$.titleAlert("New mail!", {
    requireBlur:true,
    stopOnFocus:true,
    interval:600
});

Se non stai usando jQuery, potresti comunque voler guardare il codice sorgente (ci sono alcuni bug eccentrici e casi limite che devi aggirare quando esegui il lampeggio del titolo se vuoi supportare completamente tutti i principali browser).

La mia risposta "interfaccia utente" è: Sei sicuro che i tuoi utenti vogliono che i loro browser lampeggino o pensi che sia quello che vogliono? Se fossi io a usare il tuo software, so che sarei infastidito se questi avvisi si verificassero molto spesso e si mettessero sulla mia strada.

Se sei sicuro di volerlo fare in questo modo, utilizza una casella di avviso javascript. Questo è ciò che fa Google Calendar per i promemoria degli eventi e probabilmente ci hanno pensato bene.

Una pagina web non è davvero il mezzo migliore per gli avvisi di necessità di sapere. Se stai progettando qualcosa sulla falsariga di "ZOMG, i server non funzionano!" avvisi, e-mail automatiche o messaggi SMS alle persone giuste potrebbero fare il trucco.

Presumibilmente puoi farlo su Windows con l'API javascript di growl per Windows:

http://ajaxian.com/archives/growls-for-windows-and-a-web-notification-api

I tuoi utenti dovranno però installare growl.

Alla fine questo farà parte di Google Gears, sotto forma di NotificationAPI:

http://code.google.com/p/gears/wiki/NotificationAPI

Quindi consiglierei di utilizzare l'approccio growl per ora, ricadendo sugli aggiornamenti del titolo della finestra se possibile e già ingegnerizzando nei tentativi di utilizzare l'API di notifica di Gears, per quando alla fine sarà disponibile.

                var oldTitle = document.title;
                var msg = "New Popup!";
                var timeoutId = false;

                var blink = function() {
                    document.title = document.title == msg ? oldTitle : msg;//Modify Title in case a popup

                    if(document.hasFocus())//Stop blinking and restore the Application Title
                    {
                        document.title = oldTitle;
                        clearInterval(timeoutId);
                    }                       
                };

                if (!timeoutId) {
                    timeoutId = setInterval(blink, 500);//Initiate the Blink Call
                };//Blink logic 

L'unico modo in cui posso pensare di farlo è fare qualcosa come alert ("hai un nuovo messaggio") quando il messaggio viene ricevuto. Questo farà lampeggiare la barra delle applicazioni se la finestra è ridotta a icona, ma aprirà anche una finestra di dialogo, che potresti non volere.

Perché non adottare l'approccio utilizzato da GMail e mostrare il numero di messaggi nel titolo della pagina?

A volte gli utenti non vogliono essere distratti quando arriva un nuovo messaggio.

Potresti provare window.focus (), ma potrebbe essere fastidioso se lo schermo cambia

è possibile modificare il titolo della pagina web con ogni nuovo messaggio per avvisare l'utente. L'ho fatto per un client di chat del browser e la maggior parte degli utenti ha pensato che funzionasse abbastanza bene.

document.title = "[user] hello world";

AFAIK, non c'è un buon modo per farlo con coerenza. Stavo scrivendo un client di messaggistica istantanea basato sul Web IE. Abbiamo finito per usare window.focus (), che funziona la maggior parte del tempo. A volte in realtà la finestra ruba il focus dall'app in primo piano, il che può essere davvero fastidioso.

Questi utenti vogliono essere distratti quando arriva un nuovo messaggio.

Sembra che tu stia scrivendo un'app per un progetto aziendale interno.

Potresti voler indagare sulla scrittura di una piccola app Windows in .net che aggiunge un'icona di notifica e può quindi creare popup fantasiosi o popup a fumetto o qualsiasi altra cosa, quando ricevono nuovi messaggi.

Non è eccessivamente difficile e sono sicuro che se chiedi COSÌ 'come faccio a mostrare un'icona nel vassoio' e 'come faccio a visualizzare le notifiche' riceverai delle ottime risposte :-)

Per la cronaca, sono abbastanza sicuro che (oltre a utilizzare una finestra di dialogo di avviso / prompt) non è possibile eseguire il flashing della barra delle applicazioni in JS, poiché questo è fortemente specifico di Windows e JS non funziona davvero così. Potresti essere in grado di utilizzare alcuni controlli ActiveX di Windows specifici di IE, ma poi infliggi IE ai tuoi poveri utenti. Non farlo :-(

function blinkTab() {
        const browserTitle = document.title;
        let timeoutId;
        let message = 'My New Title';

        const stopBlinking = () => {
            document.title = browserTitle;
            clearInterval(timeoutId);
        };

        const startBlinking = () => {
            document.title = document.title  === message ? browserTitle : message;
        };

        function registerEvents() {
            window.addEventListener("focus", function(event) { 
                stopBlinking();
            });

            window.addEventListener("blur", function(event) {
                const timeoutId = setInterval(startBlinking, 500);
            });
        };

        registerEvents();
    };


    blinkTab();