Как вконтакте выводит сообщение когда вкладка не активна?

Question

[Богдан Пасечник]

Когда приходит сообщение на vk.com даже если я сейчас читаю хабру справа внизу всплывает сообщение.
Хотел узнать каким образом они это реализовали.

Решение

            if (typeof window.webkitNotifications == 'undefined') {
                console.log('Notifications API не поддерживается вашим браузером.');
            } else {
                if (webkitNotifications.checkPermission() != 0) {
                    webkitNotifications.requestPermission();
                }
                var notification=webkitNotifications.createNotification('icon.png', 'Заголовок', 'Проверка Notifications API');
                notification.show();
            }

Важно что бы метод requestPermission вызывался по пользовательскому событию. Иначе хром заблокирует его исполнение в целях безопасности.
Прочитал тут y3x.ru/2011/02/js-web-notifications-api/

Comments

[freeek]

Справа на активной вкладке? Может у вас расширение какое включено?

Answer 1

[Mikhail Osher]

Это приколюшка — notifications в Google Chrome.
support.google.com/mail/bin/answer.py?hl=ru&answer=1075549

А вкл/выкл — vk.com/im
Внизу есть «Включить/Выключить уведомления»

Comments

[Богдан Пасечник]

Круто! Спасибо.
Сделал так

        if (typeof window.webkitNotifications == 'undefined') {
            console.log('Notifications API не поддерживается вашим браузером.');
        } else {
            if (webkitNotifications.checkPermission() != 0) {
                webkitNotifications.requestPermission();
            }
            webkitNotifications.createNotification('icon.png', 'Заголовок', 'Проверка Notifications API');
        }

Выдает ошибку Uncaught Error: SECURITY_ERR: DOM Exception 18

[Mikhail Osher]

st3.userapi.com/js/al/notifier.js?853

[Богдан Пасечник]

На сколько я понял это просто код скрипта с вконтакте. Или его можно использовать для вывода таких сообщений. Я сейчас читаю инструкции по использованию webkitNotifications. Выглядит странно такое количество кода для вывода такого сообщения на фоне 10 строчек в мануалах.

[Богдан Пасечник]

Разобрался. Там стоит защита от вызова событий при загрузке страницы. Нужно что бы пользователь спровоцировал событие.

[Mikhail Osher]

Это я Вам дал ссылку на скрипт ВК. Я бы просто прочитал этот код, чтобы вникнуть в сам процесс. Возможно там есть какие-то подводные камни, которых нет в мануале, но лечатся в скрипте.

[Богдан Пасечник]

Я уже разобрался. Сейчас оформлю решение.

[denis_milyukov]

Так как же все таки можно их включат или отключать?

[Богдан Пасечник]

denis_milyukov: самый простой способ это использовать библиотеку https://github.com/azproduction/jquery.notification
Она решает все проблемы.
Второй способ которым пользуются многие сайты. В настройках профиля пользователя он может включить всплывающие сообщения. При клике на галочку включения вы запускаете процесс вывода и пользователь подтверждает свое решение. После этого будут работать нотификации

Answer 2

[Сергей Протько]

Никогда такого не видел, вы уверены что это именно JS а не дополнение к браузеру?

Answer 3

[Влад Животнев]

Так же, как и gmail =)
Но сам контакт так, вроде, не умеет, это больше правда на дополнение похоже (MusicSig?)

Comments

[Богдан Пасечник]

Я уже написал решение. Это возможность браузера google Chrome