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

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

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

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

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

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

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

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

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

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

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

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 =)

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

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить