JavaScript Vibration API

Введение в Vibration API

Vibration API позволяет веб-страницам активировать мотор вибрации устройства, обеспечивая пользователям тактильную (haptic) обратную связь. Он предназначен для мобильных телефонов и планшетов, которые физически вибрируют — на настольном компьютере без мотора вызовы выполняются без ошибок, но ничего не происходит.

Весь API состоит из единственного метода — navigator.vibrate(). Он не запрашивает разрешений и не генерирует событий: вы его вызываете — устройство вибрирует. Оборотная сторона в том, что браузеры ограничивают когда именно можно его вызывать; подробности изложены в этой главе.

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

Метод navigator.vibrate()

navigator.vibrate() принимает один из двух типов аргументов:

• Одно число — вибрировать один раз в течение указанного числа миллисекунд.
• Массив чисел — шаблон чередующихся промежутков вибрации и паузы.

Метод возвращает boolean: true, если запрос принят, и false, если отклонён (например, когда не было жеста пользователя). На устройствах без мотора метод всё равно вернёт true, но вибрации не будет.

// Single vibration for 500 milliseconds
navigator.vibrate(500);

Шаблоны вибрации

При передаче array числа интерпретируются как вибрация, пауза, вибрация, пауза, …. Элементы с нечётными индексами — это беззвучные промежутки.

// Vibrate 200 ms, pause 100 ms, vibrate 400 ms
navigator.vibrate([200, 100, 400]);

// "Morse"-like triple buzz: buzz, gap, buzz, gap, buzz
navigator.vibrate([100, 50, 100, 50, 100]);

Завершающая пауза не имеет эффекта, поскольку после неё нет вибрации.

Остановка вибрации

Новый вызов заменяет любую уже выполняющуюся вибрацию. Чтобы отменить её полностью, передайте 0 или пустой array:

navigator.vibrate(0);   // stop immediately
navigator.vibrate([]);  // also stops — equivalent to 0

Это удобно для сброса обратной связи, когда пользователь закрывает оповещение или переходит на другую страницу.

Определение поддержки

В неподдерживаемых браузерах navigator.vibrate равен undefined, поэтому прямой вызов приведёт к ошибке. Оборачивайте каждый вызов проверкой:

function buzz(pattern) {
  if ('vibrate' in navigator) {
    return navigator.vibrate(pattern);
  }
  return false; // API not available — fall back to a visual cue
}

buzz(200);
buzz([100, 50, 100]);

Само определение поддержки можно выполнять где угодно — в том числе в Node или настольном браузере — даже если реальная вибрация происходит только на поддерживающем оборудовании.

Практическое применение

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

Обратная связь на действия пользователя

Короткая вибрация подтверждает нажатие на устройствах, где пользователь не всегда видит реакцию экрана. Обратите внимание, что обработчик click сам по себе является жестом пользователя, поэтому вызов разрешён:

document.getElementById('button').addEventListener('click', () => {
  if ('vibrate' in navigator) {
    navigator.vibrate(100); // brief confirmation buzz
  }
});

Оповещения уведомлений

Когда звуковой или визуальный сигнал может быть пропущен или неуместен (беззвучный режим, доступность), его может заменить характерный шаблон вибрации:

function alertUser() {
  if ('vibrate' in navigator) {
    navigator.vibrate([500, 200, 500]); // buzz, pause, buzz
  }
}

Улучшение игрового опыта

В веб-играх вибрация добавляет физическую обратную связь в ключевые моменты — но только если момент следует сразу после действия пользователя, иначе вызов будет проигнорирован:

function gameOver() {
  if ('vibrate' in navigator) {
    navigator.vibrate(1000); // one long buzz signals game over
  }
}

Ограничения, которые нужно учитывать

Vibration API выглядит простым, но браузеры обёртывают его в ограничения, из-за которых он «ничего не делает»:

• На практике — только мобильные устройства. Вибрация требует наличия аппаратного мотора. Настольные браузеры либо не поддерживают метод вовсе (Safari, Firefox на десктопе), либо принимают вызов без вибрации. Относитесь к вибрации как к улучшению, а не к единственному способу обратной связи.
• Требуется жест пользователя. Современные браузеры игнорируют navigator.vibrate(), если он вызван не в ответ на реальное взаимодействие (нажатие, клик или клавишу). Вибрация, запущенная при загрузке страницы, из setTimeout или из фонового события, молча отбрасывается — метод возвращает false. Вызывайте вибрацию непосредственно внутри обработчика событий.
• Нет разрешений, нет канала обратной связи. Запрос разрешения не выводится, события ошибки не генерируются; отклонённый вызов просто возвращает false. Проверяйте это возвращаемое значение, если нужно знать, сработало ли всё.
• Скрытые вкладки заблокированы. Если страница не видна (вкладка в фоне), запрос игнорируется.
• Шаблоны ограничены. Браузеры ограничивают максимальную общую продолжительность и количество элементов в шаблоне; чрезмерно длинные вибрации обрезаются.

Лучшие практики и рекомендации

Хотя Vibration API открывает новые возможности для взаимодействия с пользователями, его реализацию следует продумывать с учётом пользовательского опыта.

• Учитывайте предпочтения пользователей: всегда предоставляйте возможность отключить вибрационную обратную связь, принимая во внимание тех, кто считает её навязчивой или имеет особые потребности в доступности.
• Расход батареи: учитывайте возможное влияние на время работы устройства от аккумулятора, особенно при активном использовании шаблонов или длинных вибраций.
• Тестируйте на разных устройствах: интенсивность вибрации и восприятие шаблонов могут существенно различаться на разных устройствах. Тестирование на различных устройствах обеспечивает единообразный пользовательский опыт.
• Совместимость с браузерами: Vibration API преимущественно поддерживается мобильными браузерами (Chrome, Firefox, Edge). Он не поддерживается в Safari и большинстве настольных браузеров. Всегда проверяйте поддержку перед реализацией.

Заключение

Vibration API в JavaScript предлагает практичный способ взаимодействия с пользователями через тактильную обратную связь посредством единственного метода — navigator.vibrate(). Помните об основном: определяйте поддержку перед вызовом, активируйте только из жестов пользователя, придерживайтесь подхода mobile-first и всегда дополняйте тактильный отклик визуальным или звуковым, чтобы ничего не терялось на неподдерживаемых устройствах.

Чтобы продолжить изучение браузерных API, ориентированных на устройство, см. Screen Orientation API для реагирования на изменения ориентации (портрет/ландшафт), Geolocation API для работы с данными местоположения и Browser Environment, Specs — о том, как navigator и другие объекты среды взаимодействуют друг с другом.

Практика