Что такое тактильная обратная связь?

Тактильная обратная связь — это осязательный ответ устройства, небольшая вибрация или толчок, которые подтверждают действие или привлекают внимание. На смартфонах она создаётся крошечным мотором (на iPhone это "Taptic Engine" от Apple), который генерирует короткие, точно рассчитанные импульсы. В отличие от долгой гудящей вибрации, современная тактильная обратная связь чёткая и тонкая, напоминающая физический щелчок, а не сигнал тревоги.

В нативных приложениях iOS разработчики используют API UIFeedbackGenerator для воспроизведения различных паттернов тактильной обратной связи, таких как лёгкий толчок, двойной толчок "успеха" или тройной толчок "ошибки". Долгое время веб-платформа в iOS Safari не имела эквивалента — navigator.vibrate() просто игнорировался на iPhone. Библиотека ios-haptics использует побочный эффект элемента <input type="checkbox" switch> (введённого в Safari 17.4): переключение этого переключателя запускает системный движок тактильной обратной связи, позволяя веб-страницам воспроизводить короткие паттерны из JavaScript.

Описание инструмента

iOS Haptics Tester позволяет вам запускать паттерны тактильной обратной связи прямо из браузера, чтобы проверить, поддерживает ли ваше устройство и версия ОС эту функцию. Он предоставляет три паттерна из библиотеки ios-haptics — одиночный толчок, "подтверждение" (два быстрых толчка) и "ошибка" (три быстрых толчка) — а также кнопку, которая вызывает стандартный API navigator.vibrate() как резервный вариант для Android и других устройств.

Примеры

Действие Ожидаемое ощущение на iPhone (iOS 17.4–26.4) Ожидаемое ощущение на Android
Одиночная тактильная обратная связь Один короткий, чёткий толчок Одна короткая вибрация (~200 мс)
Подтверждение (два быстрых толчка) Два быстрых толчка подряд Две короткие вибрации
Ошибка (три быстрых толчка) Три быстрых толчка подряд Три короткие вибрации
Тест navigator.vibrate() Ничего на большинстве версий iOS Одна вибрация ~200 мс

Возможности

  • Кнопки для одиночного толчка, подтверждения и ошибки
  • Автоматическое определение поддержки тактильной обратной связи на текущем устройстве
  • Встроенный резервный тест для стандартного Web API navigator.vibrate()
  • Живой журнал событий с временными метками для каждого запущенного паттерна
  • Понятные баннеры статуса, объясняющие совместимость версий iOS

Варианты использования

  • Веб-разработчики, проверяющие, что тактильная обратная связь работает на реальном iPhone перед интеграцией ios-haptics на свой сайт или PWA
  • QA-инженеры, проверяющие, как одинаковые паттерны ощущаются на разных устройствах, версиях ОС и браузерах
  • Любопытные пользователи, которые хотят почувствовать разницу между iOS-стилем "Taptic" обратной связи и более долгим Android импульсом navigator.vibrate()

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

В iOS Safari инструмент динамически создаёт скрытый <input type="checkbox" switch>, переключает его, а затем удаляет из DOM. Акт переключения этого нативного переключателя — вот что запускает Taptic Engine — нет публичного Web API, который делает это напрямую. Паттерны "подтверждение" и "ошибка" просто повторяют переключение дважды или трижды в быстрой последовательности.

На устройствах, которые не поддерживают трюк с iOS переключателем, библиотека переходит на navigator.vibrate(), который широко поддерживается браузерами Android. Кнопка "Тест navigator.vibrate()" в этом инструменте вызывает этот API напрямую, чтобы вы могли сравнить оба механизма.

Объяснение опций

  • Одиночная тактильная обратная связь — Воспроизводит один короткий толчок. Лучше всего использовать для подтверждения небольшого взаимодействия, такого как переключатель или успешная валидация поля формы.
  • Подтверждение (два быстрых толчка) — Воспроизводит два быстрых толчка. Идеально для "сохранено", "отправлено" или других положительных подтверждений.
  • Ошибка (три быстрых толчка) — Воспроизводит три быстрых толчка. Используйте для сигнализации об ошибках валидации или разрушительных сбоях.
  • Тест navigator.vibrate() — Вызывает Web Vibration API с длительностью 200 мс. Полезно для подтверждения поддержки устройств, отличных от iOS, и для сравнения ощущений с iOS паттернами.
  • Очистить журнал — Удаляет все записи из журнала событий.

Ограничения

  • Программная тактильная обратная связь iOS работает только на iOS 17.4 через 26.4. Apple исправила базовое поведение в iOS 26.5, поэтому вызов этих паттернов из JavaScript больше не запускает Taptic Engine на последних версиях iOS. Прямое взаимодействие пользователя с реальным <input type="checkbox" switch> всё ещё работает.
  • iOS Safari игнорирует navigator.vibrate() практически на всех версиях, поэтому кнопка резервного варианта будет молчать на iPhone.
  • Браузеры на рабочих столах не могут производить тактильную обратную связь; кнопки будут работать, но вы ничего не почувствуете.
  • Некоторые браузеры Android требуют, чтобы страница была в фокусе и было пользовательское действие перед тем, как navigator.vibrate() сработает.
  • Тактильная обратная связь также может быть отключена в системных настройках устройства (например, Настройки → Звуки и вибрация → Системные вибрации на iOS).

Советы

  • Тестируйте на реальном устройстве, а не на симуляторе или эмуляторе — виртуальные устройства не имеют Taptic Engine.
  • Если ничего не происходит на iPhone, проверьте, что Системные вибрации включены в Настройках и что режим "Без звука" их не подавляет на старых версиях iOS.
  • Используйте паттерн подтверждения экономно; чрезмерное использование быстрых толчков быстро становится раздражающим.
  • Комбинируйте тактильную обратную связь с визуальной обратной связью — одной тактильной обратной связи редко достаточно для передачи состояния пользователю.

Часто задаваемые вопросы

Почему я ничего не чувствую на своём iPhone? Вероятно, вы используете iOS 26.5 или новее, где Apple исправила технику, используемую этой библиотекой. Попробуйте устройство с iOS 17.4–26.4 или проверьте, что системные вибрации включены в Настройках.

Почему navigator.vibrate() не работает на iPhone? Apple никогда не реализовала Web Vibration API в iOS Safari. В настоящее время нет стандартизированного способа запустить вибрацию на iOS со страницы веб-приложения.

Безопасно ли использовать это в production? Библиотека небольшая и не имеет побочных эффектов, но поскольку она полагается на особенность одного конкретного HTML-элемента, она может сломаться в любом будущем обновлении iOS — как это уже произошло в iOS 26.5. Всегда рассматривайте тактильную обратную связь как прогрессивное улучшение, никогда не как требование.

Работает ли это внутри PWA или приложения "Добавить на главный экран"? Да, на поддерживаемых версиях iOS та же техника работает в установленных веб-приложениях так же, как в Safari.