Spraw, aby okno przeglądarki migało na pasku zadań

Jak sprawić, by przeglądarka użytkownika migała / migała / podświetlała na pasku zadań za pomocą JavaScript? Na przykład, jeśli co 10 sekund wysyłam żądanie AJAX, aby sprawdzić, czy użytkownik ma jakieś nowe wiadomości na serwerze, chcę, aby użytkownik wiedział o tym od razu, nawet jeśli używa w tym czasie innej aplikacji.

Edycja: Ci użytkownicy chcą, aby rozpraszali się, gdy nadejdzie nowa wiadomość.

nie spowoduje to, że przycisk paska zadań będzie migał zmieniającymi się kolorami, ale tytuł będzie migał, dopóki nie poruszą myszą. Powinno to działać na wielu platformach, a nawet jeśli mają to po prostu na innej karcie.

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;
        }
    };
}());

Aktualizacja : warto przyjrzeć się używaniu powiadomień HTML5 .

Zrobiłem wtyczkę jQuery w celu migania powiadomień na pasku tytułu przeglądarki. Możesz określić różne opcje, takie jak interwał migania, czas trwania, czy miganie powinno przestać migać, gdy okno / karta stanie się fokusem itp. Wtyczka działa w przeglądarkach Firefox, Chrome, Safari, IE6, IE7 i IE8.

Oto przykład, jak go używać:

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

Jeśli nie używasz jQuery, możesz nadal chcieć spojrzeć na kod źródłowy (jest kilka dziwacznych błędów i skrajnych przypadków, które musisz obejść podczas mrugania tytułem, jeśli chcesz w pełni obsługiwać wszystkie główne przeglądarki).

Moja odpowiedź „interfejsu użytkownika” brzmi: Czy na pewno Twoi użytkownicy chcą, aby ich przeglądarki flashowały, czy myślisz, że tego właśnie chcą? Wiem, że gdybym to ja używał twojego oprogramowania, byłbym zirytowany, gdyby te alerty zdarzały się bardzo często i przeszkadzały mi w tym.

Jeśli jesteś pewien, że chcesz to zrobić w ten sposób, użyj pola ostrzegawczego javascript. To właśnie robi Kalendarz Google w przypadku przypomnień o wydarzeniach i prawdopodobnie zastanowili się nad tym.

Strona internetowa naprawdę nie jest najlepszym medium dla alertów, które trzeba znać. Jeśli projektujesz coś w stylu „ZOMG, serwery nie działają!” alerty, automatyczne e-maile lub wiadomości SMS do właściwych osób mogą załatwić sprawę.

Podobno możesz to zrobić w systemie Windows z growlem dla Windows javascript API:

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

Twoi użytkownicy będą jednak musieli zainstalować growl.

Ostatecznie będzie to część narzędzi Google w postaci NotificationAPI:

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

Dlatego poleciłbym na razie zastosować podejście growl, cofając się do aktualizacji tytułów okien, jeśli to możliwe, i już opracowywać próby użycia interfejsu API Gears Notification, gdy w końcu stanie się dostępny.

                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 

Jedynym sposobem, w jaki mogę o tym pomyśleć, jest wykonanie czegoś w rodzaju ostrzeżenia („masz nową wiadomość”), gdy wiadomość zostanie odebrana. Spowoduje to flashowanie paska zadań, jeśli okno jest zminimalizowane, ale otworzy również okno dialogowe, którego możesz nie chcieć.

Dlaczego by nie przyjąć podejścia stosowanego w Gmailu i wyświetlić liczbę wiadomości w tytule strony?

Czasami użytkownicy nie chcą rozpraszać się, gdy nadejdzie nowa wiadomość.

Możesz spróbować window.focus () - ale może to być denerwujące, jeśli ekran się przełącza

możesz zmienić tytuł strony internetowej przy każdej nowej wiadomości, aby ostrzec użytkownika. Zrobiłem to dla klienta czatu w przeglądarce i większość użytkowników uważało, że działa wystarczająco dobrze.

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

AFAIK, nie ma dobrego sposobu, aby to zrobić konsekwentnie. Pisałem klienta komunikatora internetowego tylko dla IE. Skończyło się na tym, że użyliśmy window.focus (), które działa przez większość czasu. Czasami faktycznie powoduje to, że okno kradnie fokus z aplikacji pierwszego planu, co może być naprawdę denerwujące.

Ci użytkownicy chcą być rozproszeni, gdy nadejdzie nowa wiadomość.

Wygląda na to, że piszesz aplikację do wewnętrznego projektu firmy.

Możesz chcieć zbadać napisanie małej aplikacji Windows w .net, która dodaje ikonę powiadamiania, a następnie może tworzyć fantazyjne wyskakujące okienka lub wyskakujące okienka lub cokolwiek innego, gdy otrzymają nowe wiadomości.

Nie jest to zbyt trudne i jestem pewien, że jeśli zapytasz SO `` jak pokazać ikonę w zasobniku '' i `` jak mogę wyświetlać powiadomienia '', otrzymasz świetne odpowiedzi :-)

Dla przypomnienia, jestem prawie pewien, że (poza używaniem okna dialogowego ostrzeżenia / zachęty) nie możesz flashować paska zadań w JS, ponieważ jest to mocno związane z oknami, a JS naprawdę tak nie działa. Możesz być w stanie użyć niektórych formantów ActiveX specyficznych dla IE, ale wtedy narzucisz IE swoim biednym użytkownikom. Nie rób tego :-(

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();