Faire clignoter la fenêtre du navigateur dans la barre des tâches

Comment faire clignoter / flasher / mettre en évidence le navigateur d'un utilisateur dans la barre des tâches à l'aide de JavaScript? Par exemple, si je fais une requête AJAX toutes les 10 secondes pour voir si l'utilisateur a de nouveaux messages sur le serveur, je veux que l'utilisateur le sache tout de suite, même s'il utilise une autre application à ce moment-là.

Modifier: ces utilisateurs veulent être distraits lorsqu'un nouveau message arrive.

cela ne fera pas clignoter le bouton de la barre des tâches avec des couleurs changeantes, mais le titre clignotera jusqu'à ce qu'ils déplacent la souris. Cela devrait fonctionner sur plusieurs plates-formes, et même s'ils l'ont juste dans un autre onglet.

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

Mise à jour : vous voudrez peut-être envisager d'utiliser les notifications HTML5 .

J'ai créé un plugin jQuery dans le but de faire clignoter les messages de notification dans la barre de titre du navigateur. Vous pouvez spécifier différentes options comme l'intervalle de clignotement, la durée, si le clignotement doit s'arrêter lorsque la fenêtre / l'onglet se concentre, etc. Le plugin fonctionne dans Firefox, Chrome, Safari, IE6, IE7 et IE8.

Voici un exemple d'utilisation:

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

Si vous n'utilisez pas jQuery, vous voudrez peut-être toujours consulter le code source (il y a quelques bogues bizarres et cas extrêmes que vous devez contourner lorsque vous faites clignoter le titre si vous souhaitez prendre en charge pleinement tous les principaux navigateurs).

Ma réponse "interface utilisateur" est la suivante: êtes-vous sûr que vos utilisateurs souhaitent que leur navigateur clignote ou pensez-vous que c'est ce qu'ils veulent? Si j'étais celui qui utilisait votre logiciel, je sais que je serais ennuyé si ces alertes se produisaient très souvent et me gênaient.

Si vous êtes sûr de vouloir le faire de cette façon, utilisez une boîte d'alerte javascript. C'est ce que fait Google Agenda pour les rappels d'événements, et ils y ont probablement réfléchi.

Une page Web n'est vraiment pas le meilleur moyen pour les alertes de nécessité de savoir. Si vous concevez quelque chose comme "ZOMG, les serveurs sont en panne!" des alertes, des e-mails automatisés ou des SMS aux bonnes personnes peuvent faire l'affaire.

On suppose que vous pouvez le faire sur Windows avec l'API javascript Growl pour Windows:

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

Vos utilisateurs devront cependant installer growl.

Finalement, cela fera partie de Google Gears, sous la forme de NotificationAPI:

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

Je recommanderais donc d'utiliser l'approche du grognement pour le moment, de revenir aux mises à jour du titre de la fenêtre si possible, et de déjà concevoir des tentatives d'utilisation de l'API Gears Notification, pour le moment où elle sera finalement disponible.

                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 

La seule façon dont je peux penser à faire cela est de faire quelque chose comme alert («vous avez un nouveau message») lorsque le message est reçu. Cela fera clignoter la barre des tâches si la fenêtre est réduite, mais cela ouvrira également une boîte de dialogue, ce que vous ne voudrez peut-être pas.

Pourquoi ne pas adopter l'approche utilisée par GMail et afficher le nombre de messages dans le titre de la page?

Parfois, les utilisateurs ne veulent pas être distraits lorsqu'un nouveau message arrive.

Vous voudrez peut-être essayer window.focus () - mais cela peut être ennuyeux si l'écran change

vous pouvez changer le titre de la page Web à chaque nouveau message pour alerter l'utilisateur. J'ai fait cela pour un client de chat de navigateur et la plupart des utilisateurs ont pensé que cela fonctionnait assez bien.

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

AFAIK, il n'y a pas de bon moyen de le faire avec cohérence. J'écrivais un client de messagerie instantanée basé uniquement sur le Web pour IE. Nous avons fini par utiliser window.focus (), qui fonctionne la plupart du temps. Parfois, cela entraînera en fait la fenêtre de voler le focus de l'application au premier plan, ce qui peut être vraiment ennuyeux.

Ces utilisateurs veulent être distraits lorsqu'un nouveau message arrive.

On dirait que vous écrivez une application pour un projet d'entreprise interne.

Vous voudrez peut-être enquêter sur l'écriture d'une petite application Windows dans .net qui ajoute une icône de notification et peut ensuite créer des fenêtres contextuelles sophistiquées ou des bulles contextuelles ou autre, quand ils reçoivent de nouveaux messages.

Ce n'est pas trop difficile et je suis sûr que si vous demandez `` comment afficher une icône de barre d'état '' et `` comment puis-je faire apparaître des notifications '', vous obtiendrez d'excellentes réponses :-)

Pour mémoire, je suis à peu près sûr que (à part l'utilisation d'une boîte de dialogue d'alerte / d'invite) vous ne pouvez pas faire clignoter la barre des tâches dans JS, car c'est fortement spécifique à Windows, et JS ne fonctionne vraiment pas comme ça. Vous pourrez peut-être utiliser certains contrôles ActiveX Windows spécifiques à IE, mais vous infligez alors IE à vos utilisateurs pauvres. Ne fais pas ça :-(

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