Какво е хаптична обратна връзка?

Хаптичната обратна връзка е тактилен отговор — малко вибриране или докосване — което устройството произвежда, за да потвърди действие или привлече внимание. На смартфони се генерира от малък мотор (на iPhone, "Taptic Engine" на Apple), който създава кратки, прецизно времеви импулси. За разлика от дълго жужащо вибриране, съвременната хаптика е остра и фина, предназначена да се чувства като физически щракване, а не като аларма.

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

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

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

Примери

Действие Очаквано усещане на iPhone (iOS 17.4–26.4) Очаквано усещане на Android
Едно хаптично докосване Едно кратко, остро докосване Едно кратко вибриране (~200 ms)
Потвърждение (две докосвания) Две бързи докосвания подред Две кратки вибрирания
Грешка (три докосвания) Три бързи докосвания подред Три кратки вибрирания
Тест navigator.vibrate() Нищо на повечето iOS версии Едно ~200 ms вибриране

Функции

  • Еднокликни бутони за едно, потвърждение и грешка хаптични модели
  • Автоматично открояване на хаптична поддръжка на текущото устройство
  • Вграден резервен тест за стандартния navigator.vibrate() Web API
  • Живо дневник на събитията с времеви печати за всеки задействан модел
  • Ясни статус банери, обясняващи съвместимостта на 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 ms. Полезно за потвърждение на поддръжката на не-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() да се задейства.
  • Хаптичната обратна връзка може също да бъде деактивирана в системните настройки на устройството (например Settings → Sounds & Haptics → System Haptics на iOS).

Съвети

  • Тестирайте на реално устройство, не на симулатор или емулатор — виртуалните устройства нямат Taptic Engine.
  • Ако нищо не се случи на iPhone, проверете че System Haptics са активирани в Settings и че Silent Mode не ги потиска на по-старите iOS версии.
  • Използвайте модела Потвърждение пестеливо; прекомерното използване на бързи докосвания бързо става досадно.
  • Комбинирайте хаптиката с визуална обратна връзка — хаптика сама по себе си рядко е достатъчна, за да съобщи състояние на потребителя.

ЧЗВ

Защо не чувствам нищо на моя iPhone? Вероятно сте на iOS 26.5 или по-нова, където Apple поправи техниката, използвана от тази библиотека. Опитайте устройство, работещо на iOS 17.4–26.4, или проверете че System Haptics са активирани в Settings.

Защо navigator.vibrate() не работи на iPhone? Apple никога не е внедрила Web Vibration API в iOS Safari. В момента няма стандартизиран начин да задействате вибриране на iOS от уеб страница.

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

Работи ли вътре в PWA или "Add to Home Screen" приложение? Да, на поддържаните iOS версии същата техника работи в инсталирани уеб приложения точно както в Safari.