Сегодня мы рассмотрим способ определения активности пользователя на странице, и в этом нам поможет JavaScript библиотека ifvisible.
Живет ifvisible на github. С примером её использования вы можете ознакомиться в материалах «демо». Там вы увидите, как страница будет реагировать на пользователя, находящегося в неактивном состоянии. Если вы перейдёте на другую вкладку, свернёте или просто не будете двигать мышью, то через 30 секунд окно изменит прозрачность. Все ваши действия на этой странице отпишутся в логах, которые там же вы сможете и увидеть.
Теперь давайте рассмотрим, как непосредственно работать с библиотекой. В начале напишем простой пример, который проверяет активность пользователя на момент загрузки страницы.
if(ifvisible.now()){
// Делаем что-то
}
Если ваш пользователь решил перейти на другую вкладку, то это можно отследить, используя следующий код:
ifvisible.on("blur", function(){
// Ушел со страницы
// Делаем что-то
});
ifvisible.on("focus", function(){
// Вернулся
// Делаем что-то
});
Когда пользователь стал неактивен на странице, то это можно отследить таким образам:
ifvisible.on("idle", function(){
// Пользователь не активен
// Делаем что-то
});
ifvisible.on("wakeup", function(){
// Проснулся
// Делаем что-то
});
Задержка перехода в ждущий режим составляет по умолчанию 60 секунд. Это время можно изменить:
ifvisible.setIdleDuration(10);
Также всеми событиями можно управлять отдельно:
// Переведет страницу в ждущий режим
ifvisible.idle();
ifvisible.idle(function(){
// Этот код заработает,
// когда страница перейдет в ждущий режим
});
// Другие методы
ifvisible.blur();
ifvisible.focus();
ifvisible.idle();
ifvisible.wakeup();
При помощи библиотеки вы можете установить свои интервалы, если пользователь перешел в неактивное состояние:
// Если страница активна, эта функция будет выполняться каждые полсекунды.
ifvisible.onEvery(0.5, function(){
// Анимировать «лого» только,
// когда страница активна
animateLogo();
});
Как видите довольно полезная библиотека и удобная, а на этом у меня всё.