Co to jest sprzężenie zwrotne haptyczne?

Sprzężenie zwrotne haptyczne to odpowiedź dotykowa — małe wibracje lub stuknięcie — które urządzenie generuje, aby potwierdzić akcję lub zwrócić uwagę. Na smartfonach jest generowane przez mały silnik (na iPhone'ach, "Taptic Engine" firmy Apple), który tworzy krótkie, precyzyjnie czasowane impulsy. W przeciwieństwie do długiego bzyczącego wibrowania, nowoczesne haptyka są ostre i subtelne, zaprojektowane tak, aby przypominały fizyczne kliknięcie, a nie alarm.

W natywnych aplikacjach iOS deweloperzy używają API UIFeedbackGenerator do odtwarzania różnych wzorców haptycznych, takich jak lekkie stuknięcie, potwierdzające "podwójne stuknięcie" lub "błędne" potrójne stuknięcie. Przez długi czas platforma internetowa w iOS Safari nie miała odpowiednika — navigator.vibrate() był po prostu ignorowany na iPhone'ach. Biblioteka ios-haptics wykorzystuje efekt uboczny elementu <input type="checkbox" switch> (wprowadzonego w Safari 17.4): przełączenie tego przełącznika wyzwala silnik haptyczny systemu, umożliwiając stronom internetowym odtwarzanie krótkich wzorców haptycznych z JavaScript.

Opis narzędzia

iOS Haptics Tester pozwala na wyzwalanie wzorców sprzężenia zwrotnego haptycznego bezpośrednio z przeglądarki, aby sprawdzić, czy Twoje urządzenie i wersja systemu operacyjnego je obsługują. Udostępnia trzy wzorce dostarczone przez bibliotekę ios-haptics — pojedyncze stuknięcie, "potwierdzenie" (dwa szybkie stuknięcia) i "błąd" (trzy szybkie stuknięcia) — a także zawiera przycisk, który wywołuje standardowy API navigator.vibrate() jako rezerwę dla Androida i innych urządzeń.

Przykłady

Akcja Oczekiwane odczucie na iPhone (iOS 17.4–26.4) Oczekiwane odczucie na Androidzie
Pojedyncze sprzężenie zwrotne haptyczne Jedno krótkie, ostre stuknięcie Jedno krótkie wibrowanie (~200 ms)
Potwierdzenie (dwa szybkie sprzężenia zwrotne haptyczne) Dwa szybkie stuknięcia z rzędu Dwa krótkie wibrowania
Błąd (trzy szybkie sprzężenia zwrotne haptyczne) Trzy szybkie stuknięcia z rzędu Trzy krótkie wibrowania
Test navigator.vibrate() Nic w większości wersji iOS Jedno wibrowanie ~200 ms

Funkcje

  • Przyciski jednym dotknięciem dla pojedynczych, potwierdzających i błędnych wzorców haptycznych
  • Automatyczne wykrywanie obsługi haptyki na bieżącym urządzeniu
  • Wbudowana rezewa testowa dla standardowego Web API navigator.vibrate()
  • Dziennik zdarzeń na żywo ze znacznikami czasu dla każdego wyzwolonego wzorca
  • Jasne banery statusu wyjaśniające kompatybilność wersji iOS

Przypadki użycia

  • Deweloperzy internetowi weryfikujący, że sprzężenie zwrotne haptyczne działa na rzeczywistym iPhone'ie przed integracją ios-haptics z własną witryną lub PWA
  • Inżynierowie QA sprawdzający, jak te same wzorce czują się na różnych urządzeniach, wersjach systemu operacyjnego i przeglądarkach
  • Ciekawi użytkownicy, którzy chcą doświadczyć różnicy między sprzężeniem zwrotnym w stylu iOS "Taptic" a dłuższym impulsem Android navigator.vibrate()

Jak to działa

W iOS Safari narzędzie dynamicznie tworzy ukryty <input type="checkbox" switch>, przełącza go, a następnie usuwa z DOM. Przełączenie tego natywnego przełącznika to to, co wyzwala Taptic Engine — nie ma publicznego Web API, które robi to bezpośrednio. Wzorce "potwierdzenia" i "błędu" po prostu powtarzają przełączenie dwa lub trzy razy w szybkim tempie.

Na urządzeniach, które nie obsługują sztuczki przełącznika iOS, biblioteka wraca do navigator.vibrate(), który jest szeroko obsługiwany w przeglądarkach Android. Przycisk "Test navigator.vibrate()" w tym narzędziu wywołuje to API bezpośrednio, abyś mógł porównać oba mechanizmy.

Wyjaśnienie opcji

  • Pojedyncze sprzężenie zwrotne haptyczne — Odtwarza jedno krótkie stuknięcie. Najlepiej używane do potwierdzenia małej interakcji, takiej jak przełącznik lub pomyślne pole formularza.
  • Potwierdzenie (dwa szybkie sprzężenia zwrotne haptyczne) — Odtwarza dwa szybkie stuknięcia. Idealne dla "zapisane", "wysłane" lub innych pozytywnych potwierdzeń.
  • Błąd (trzy szybkie sprzężenia zwrotne haptyczne) — Odtwarza trzy szybkie stuknięcia. Użyj, aby sygnalizować błędy walidacji lub destrukcyjne awarie.
  • Test navigator.vibrate() — Wywołuje Web Vibration API z czasem trwania 200 ms. Przydatne do potwierdzenia obsługi urządzeń innych niż iOS i do porównania odczucia z wzorcami iOS.
  • Wyczyść dziennik — Usuwa wszystkie wpisy z dziennika zdarzeń.

Ograniczenia

  • Programowa haptyka iOS działa tylko na iOS 17.4 do 26.4. Apple naprawił podstawowe zachowanie w iOS 26.5, więc wywoływanie tych wzorców z JavaScript nie wyzwala już Taptic Engine na najnowszych wersjach iOS. Bezpośrednia interakcja użytkownika z rzeczywistym <input type="checkbox" switch> nadal działa.
  • iOS Safari ignoruje navigator.vibrate() w praktycznie wszystkich wersjach, więc przycisk rezerwowy będzie milczeć na iPhone'ach.
  • Przeglądarki na komputerach stacjonarnych nie mogą generować sprzężenia zwrotnego haptycznego; przyciski będą działać, ale nic nie poczujesz.
  • Niektóre przeglądarki Android wymagają, aby strona była na pierwszym planie i gestu użytkownika, zanim navigator.vibrate() zadziała.
  • Sprzężenie zwrotne haptyczne może być również wyłączone w ustawieniach systemu urządzenia (np. Ustawienia → Dźwięki i haptyka → Haptyka systemowa na iOS).

Porady

  • Testuj na rzeczywistym urządzeniu, a nie na symulatorze lub emulatorze — urządzenia wirtualne nie mają Taptic Engine.
  • Jeśli nic się nie dzieje na iPhone'ie, sprawdź, czy Haptyka systemowa jest włączona w Ustawieniach i czy Tryb cichy ich nie tłumi na starszych wersjach iOS.
  • Używaj wzorca potwierdzenia oszczędnie; nadmierne używanie szybkiej haptyki szybko staje się irytujące.
  • Łącz haptykę z wizualnym sprzężeniem zwrotnym — sama haptyka rzadko wystarczy do komunikacji stanu użytkownikowi.

FAQ

Dlaczego nic nie czuję na moim iPhone'ie? Prawdopodobnie masz iOS 26.5 lub nowszy, gdzie Apple naprawił technikę używaną przez tę bibliotekę. Spróbuj urządzenia z systemem iOS 17.4–26.4 lub sprawdź, czy Haptyka systemowa jest włączona w Ustawieniach.

Dlaczego navigator.vibrate() nie działa na iPhone'ie? Apple nigdy nie wdrożył Web Vibration API w iOS Safari. Obecnie nie ma standardowego sposobu na wyzwolenie wibracji na iOS ze strony internetowej.

Czy to bezpieczne do użytku w produkcji? Biblioteka jest mała i wolna od efektów ubocznych, ale ponieważ opiera się na osobliwości jednego konkretnego elementu HTML, może się zepsuć w każdej przyszłej aktualizacji iOS — jak już się stało w iOS 26.5. Zawsze traktuj sprzężenie zwrotne haptyczne jako ulepszenie progresywne, nigdy jako wymóg.

Czy działa wewnątrz PWA lub aplikacji "Dodaj do ekranu głównego"? Tak, na obsługiwanych wersjach iOS ta sama technika działa w zainstalowanych aplikacjach internetowych tak samo jak w Safari.