Сообщаем пользователю о том, что пока его не было, что-то произошло

Информация о материале
Категория: JavaScript
Просмотров: 4008

 

yandex emailsЗамечали ли вы, когда в соседней вкладке открыта Яндекс почта и приходит письмо, JS проигрывает короткий звук, а favicon вкладки меняется на цифру. Это очень удобно и позволяет быть достаточно оперативным, не используя сомнительный почтовый софт (привет тумберберд).

Похожая ситуация с Контактом. Когда вы не просматриваете страницу или вообще когда свернули браузер. 

Как это работает?

Раньше, мы использовали хитрости вроде 

$(window).on('mousemove', function () {})

Если мышка над вкладкой то все ок. Если нет то выдаем сообщение. Это работает, но с известной долей ошибок. 

на дворе 2015 год и давно появились специальные события браузера, которые сигнализируют нам о нужном событии.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
window.onChangeVisibility = function (callback) {
  var hidden, visibilityChange;
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }
  function handleVisibilityChange() {
    if (callback && callback.call) {
      callback.call(_this, document[hidden]);
    }
  }
  if (typeof document.addEventListener === "undefined"
    || typeof document[hidden] === "undefined") {
    return;
  }
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
}

Со строки 3 по 10 мы выбираем нужные вендорные префиксы. Дело в том, что разные браузеры вводили эту функцию по разному и пока не пришли к общему решению. Поэтому не заморачивайтесь. Просто скопируйте эту часть кода.

Далее, мы проверяем существует ли у документа метод addEventListener. Его может не быть в старых версиях IE. В этом случае пользователю уже ничего не поможет)

Далее вешаем стандартным образом обработчик на событие hidden.

Как пользоваться

onChangeVisibility(function (hidden) {
	if (hidden) {
		changeIcon('ring.png')
	} else {
		changeIcon('favicon.ico')
	}
});

Когда вы свернете вкладку, вызовется функция changeIcon. Она сменит favicon вкладки и пользователь узнает о том, что мы по нему скучаем =)

Осталось написать changeIcon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
changeIcon = function (src) {
  if (!document.head) {
    document.head = document.getElementsByTagName('head')[0];
  }
  var link = null,
   oldLink = document.getElementById('dynamic-favicon');
  if (src) {
  link = document.createElement('link');
    link.id = 'dynamic-favicon';
    link.rel = 'shortcut icon';
  link.href = src;
  }
  if (oldLink) {
    document.head.removeChild(oldLink);
  }
  if (link) {
    document.head.appendChild(link);
  }
}

А как же сигнал? Звуковой сигнал, который играет когда приходит письмо в Яндекс Почте.

Это тоже весьма просто.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function checkEmail() {
  $.getJSON('index.php?action=checkemail', function(resp){
    if (resp.hasNewEmails) {
      changeIcon('ring.png');
      var audio = new Audio('ring.mp3');
      audio.play();
    }
  });
}
var interval = 0;
onChangeVisibility(function (hidden){
   clearInterval(interval);
   if (hidden) {
    interval = setInterval(checkEmail, 5000);
   }
});

При сворачивании вкладки, или при переходе на другую, обработчик запускает циклически функцию checkEmail. Если сервер сообщил о новом письме, то проигрывает мелодию ring.mp3

Как только вкладка развернута, цикл уничтожается. Так оно и работает. Для большего эффекта можно воспользоваться мелодией ramstain.mp3 =)

Всего доброго!

Оставлять комментарии могут только зарегистрированные пользователи