Обнаруживайте неактивных пользователей с помощью API обнаружения простоя

Томас Штайнер

Опубликовано: 18 мая 2020 г.

Browser Support

  • Chrome: 94.
  • Край: 114.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

API обнаружения бездействия уведомляет разработчиков о том, когда пользователь находится в режиме бездействия, указывая на такие вещи, как отсутствие взаимодействия с клавиатурой, мышью, экраном, активация заставки, блокировка экрана или переход на другой экран. Уведомление запускается при достижении заданного разработчиком порогового значения.

Примеры использования API обнаружения простоя

Примеры сайтов, которые могут использовать этот API, включают:

  • Приложения для чата или онлайн-социальные сети могут использовать этот API, чтобы сообщить пользователю, доступны ли его контакты.
  • Общедоступные приложения для киосков, например, в музеях, могут использовать этот API для возврата на главную страницу, если с киоском больше никто не взаимодействует.
  • Приложения, требующие ресурсоемких вычислений, например, для построения диаграмм, могут ограничивать эти вычисления моментами взаимодействия пользователя со своим устройством.

Используйте API

Чтобы проверить, поддерживается ли API обнаружения простоя, используйте:

if ('IdleDetector' in window) {
  // Idle Detector API supported
}

концепции API

API обнаружения бездействия предполагает наличие определенного уровня взаимодействия между пользователем, пользовательским агентом (то есть браузером) и операционной системой используемого устройства. Это представлено в двух измерениях:

  • Состояние бездействия пользователя: active или idle : пользователь взаимодействовал или не взаимодействовал с пользовательским агентом в течение определенного периода времени.
  • Состояние ожидания экрана: locked или unlocked : система имеет активную блокировку экрана (подобную заставке), предотвращающую взаимодействие с пользовательским агентом.

Для различения active и idle требуются эвристические алгоритмы, которые могут различаться в зависимости от пользователя, пользовательского агента и операционной системы. Также следует использовать достаточно приблизительный пороговый уровень (см. раздел «Безопасность и разрешения» ).

Модель намеренно не проводит формального различия между взаимодействием с конкретным контентом (то есть, веб-страницей во вкладке с использованием API), пользовательским агентом в целом или операционной системой; это определение оставлено на усмотрение пользовательского агента.

Запросить разрешения и создать экземпляр.

Первым шагом при использовании API обнаружения простоя является проверка наличия разрешения 'idle-detection' . Если разрешение не предоставлено, необходимо запросить его с помощью IdleDetector.requestPermission() . Обратите внимание, что вызов этого метода требует действия пользователя.

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if (state !== 'granted') {
  // Need to request permission first.
  return console.log('Idle detection permission not granted.');
}

Второй шаг — создание экземпляра IdleDetector . Минимальный threshold составляет 60 000 миллисекунд (1 минуту). Наконец, можно запустить обнаружение простоя, вызвав метод start() объекта IdleDetector . Он принимает в качестве параметров объект с threshold простоя в миллисекундах и необязательный signal AbortSignal для прерывания обнаружения простоя.

try {
  const controller = new AbortController();
  const signal = controller.signal;

  const idleDetector = new IdleDetector();
  idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
  });

  await idleDetector.start({
    threshold: 60000,
    signal,
  });
  console.log('IdleDetector is active.');
} catch (err) {
  // Deal with initialization errors like permission denied,
  // running outside of top-level frame, etc.
  console.error(err.name, err.message);
}

Обнаружение остановки холостого хода

Вы можете прервать обнаружение бездействия, вызвав метод abort() AbortController .

controller.abort();
console.log('IdleDetector is stopped.');

Поддержка инструментов разработчика

В инструментах разработчика можно эмулировать события простоя , не находясь при этом в режиме реального времени. В инструментах разработчика откройте вкладку «Датчики» и найдите параметр «Эмулировать состояние детектора простоя» . Различные варианты показаны в видео.

Эмуляция состояния детектора простоя в инструментах разработчика.

Поддержка кукловода

Начиная с версии Puppeteer 5.3.1, вы можете эмулировать различные состояния простоя , чтобы программно протестировать, как изменяется поведение вашего веб-приложения.

Демо

Вы можете увидеть API обнаружения бездействия в действии на примере демонстрационного проекта Ephemeral Canvas , который удаляет свое содержимое через 60 секунд бездействия. Можно представить, как это можно было бы использовать в универмаге, чтобы дети могли на этом рисовать.

Демонстрация Ephemeral Canvas

Полиэфирный наполнитель

Некоторые аспекты API обнаружения бездействия допускают использование полифилов, и существуют библиотеки для обнаружения бездействия, такие как idle.ts , но эти подходы ограничены областью контента самого веб-приложения: библиотека, работающая в контексте веб-приложения, должна дорогостоящим образом опрашивать события ввода или отслеживать изменения видимости. Более того, библиотеки пока не могут определить, когда пользователь переходит в режим бездействия за пределами своей области контента (например, когда пользователь находится на другой вкладке или полностью вышел из системы).

Безопасность и права доступа

Команда Chrome разработала и внедрила API обнаружения простоя, используя основные принципы, изложенные в документе «Контроль доступа к мощным функциям веб-платформы» , включая пользовательский контроль, прозрачность и эргономику. Возможность использования этого API контролируется разрешением 'idle-detection' . Для использования API приложение также должно работать в защищенном контексте верхнего уровня .

Пользовательский контроль и конфиденциальность

Мы всегда стремимся предотвратить злоупотребление новыми API со стороны злоумышленников. Веб-сайты, которые кажутся независимыми, но на самом деле контролируются одной и той же организацией, могут получать информацию о неактивности пользователей и сопоставлять эти данные для идентификации уникальных пользователей из разных источников. Для смягчения подобных атак API обнаружения неактивности ограничивает детализацию сообщаемых событий неактивности.

Обратная связь

Есть ли что-то в API, что работает не так, как вы ожидали? Или отсутствуют методы или свойства, необходимые для реализации вашей идеи? Есть вопрос или комментарий по модели безопасности? Создайте заявку в соответствующем репозитории GitHub или добавьте свои мысли в существующую заявку.

Сообщить о проблеме с реализацией

Вы обнаружили ошибку в реализации Chrome? Или реализация отличается от спецификации? Сообщите об ошибке на new.crbug.com . Обязательно укажите как можно больше подробностей, простые инструкции по воспроизведению и введите Blink>Input в поле «Компоненты» .

Показать поддержку API

Планируете ли вы использовать API обнаружения простоя? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты в разработке новых функций и показывает другим разработчикам браузеров, насколько важно их поддерживать.

Полезные ссылки

Благодарности

API для обнаружения простоя был реализован Сэмом Гото . Поддержка DevTools была добавлена ​​Максимом Садымом . Благодарим Джо Медли , Кейси Баскеса и Рейли Гранта за их отзывы.