Membuat jendela browser berkedip di bilah tugas

Bagaimana cara membuat browser pengguna berkedip / flash / sorot di bilah tugas menggunakan JavaScript? Misalnya, jika saya membuat permintaan AJAX setiap 10 detik untuk melihat apakah pengguna memiliki pesan baru di server, saya ingin pengguna segera mengetahuinya, bahkan jika dia menggunakan aplikasi lain pada saat itu.

Sunting: Para pengguna ini ingin diganggu saat pesan baru tiba.

ini tidak akan membuat tombol taskbar berkedip dalam warna yang berubah, tetapi judul akan berkedip dan mati sampai mereka menggerakkan mouse. Ini harus berfungsi lintas platform, dan bahkan jika mereka hanya memilikinya di tab yang berbeda.

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

Pembaruan : Anda mungkin ingin melihat menggunakan notifikasi HTML5 .

Saya telah membuat plugin jQuery untuk tujuan mengedipkan pesan notifikasi di bilah judul browser. Anda dapat menentukan opsi yang berbeda seperti interval kedipan, durasi, jika kedipan harus berhenti ketika jendela / tab menjadi fokus, dll. Plugin bekerja di Firefox, Chrome, Safari, IE6, IE7 dan IE8.

Berikut ini contoh cara menggunakannya:

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

Jika Anda tidak menggunakan jQuery, Anda mungkin masih ingin melihat kode sumbernya (ada beberapa bug unik dan kasus edge yang perlu Anda atasi saat melakukan title blinking jika Anda ingin mendukung sepenuhnya semua browser utama).

Respons "antarmuka pengguna" saya adalah: Apakah Anda yakin pengguna ingin browser mereka berkedip, atau menurut Anda itu yang mereka inginkan? Jika saya adalah orang yang menggunakan perangkat lunak Anda, saya tahu saya akan terganggu jika peringatan ini sangat sering terjadi dan menghalangi saya.

Jika Anda yakin ingin melakukannya dengan cara ini, gunakan kotak peringatan javascript. Itulah yang dilakukan Google Kalender untuk pengingat acara, dan mereka mungkin memikirkannya.

Halaman web bukanlah media terbaik untuk peringatan yang perlu diketahui. Jika Anda mendesain sesuatu seperti "ZOMG, server sedang down!" peringatan, email otomatis, atau pesan SMS ke orang yang tepat mungkin bisa membantu.

Seharusnya Anda dapat melakukan ini di windows dengan growl for windows javascript API:

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

Pengguna Anda harus menginstal growl.

Akhirnya ini akan menjadi bagian dari Google Gears, dalam bentuk NotificationAPI:

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

Jadi saya akan merekomendasikan menggunakan pendekatan growl untuk saat ini, kembali ke update judul jendela jika memungkinkan, dan sudah melakukan rekayasa dalam upaya menggunakan Gears Notification API, untuk saat itu akhirnya tersedia.

                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 

Satu-satunya cara yang dapat saya pikirkan untuk melakukan ini adalah dengan melakukan sesuatu seperti alert ('you have a new message') saat pesan diterima. Ini akan mem-flash bilah tugas jika jendela diminimalkan, tetapi juga akan membuka kotak dialog, yang mungkin tidak Anda inginkan.

Mengapa tidak mengambil pendekatan yang digunakan GMail dan menunjukkan jumlah pesan di judul halaman?

Terkadang pengguna tidak ingin terganggu saat pesan baru tiba.

Anda mungkin ingin mencoba window.focus () - tetapi mungkin mengganggu jika layar beralih

Anda dapat mengubah judul halaman web dengan setiap pesan baru untuk mengingatkan pengguna. Saya melakukan ini untuk klien obrolan browser dan sebagian besar pengguna mengira itu berfungsi cukup baik.

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

AFAIK, tidak ada cara yang baik untuk melakukan ini dengan konsisten. Saya sedang menulis klien IM berbasis web hanya untuk IE. Kami akhirnya menggunakan window.focus (), yang berfungsi sebagian besar waktu. Terkadang itu benar-benar akan menyebabkan jendela mencuri fokus dari aplikasi latar depan, yang bisa sangat mengganggu.

Para pengguna ini ingin diganggu saat pesan baru tiba.

Sepertinya Anda sedang menulis aplikasi untuk proyek internal perusahaan.

Anda mungkin ingin menyelidiki penulisan aplikasi windows kecil di .net yang menambahkan ikon beri tahu dan kemudian dapat melakukan sembulan mewah atau sembulan balon atau apa pun, ketika mereka mendapat pesan baru.

Ini tidak terlalu sulit dan saya yakin jika Anda bertanya kepada SO 'bagaimana cara menampilkan ikon baki' dan 'bagaimana cara saya melakukan pemberitahuan sembulan' Anda akan mendapatkan jawaban yang bagus :-)

Sebagai catatan, saya cukup yakin bahwa (selain menggunakan kotak dialog peringatan / prompt) Anda tidak dapat mem-flash bilah tugas di JS, karena ini sangat spesifik untuk jendela, dan JS benar-benar tidak berfungsi seperti itu. Anda mungkin dapat menggunakan beberapa kontrol activex windows khusus IE, tetapi kemudian Anda memberikan IE pada pengguna yang buruk. Jangan lakukan itu :-(

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