Was ist haptisches Feedback?

Haptisches Feedback ist eine taktile Rückmeldung — eine kleine Vibration oder ein Tipp — die ein Gerät erzeugt, um eine Aktion zu bestätigen oder Aufmerksamkeit zu erregen. Auf Smartphones wird es durch einen winzigen Motor erzeugt (auf iPhones Apple's "Taptic Engine"), der kurze, präzise zeitgesteuerte Impulse erzeugt. Im Gegensatz zu einer langen summenden Vibration sind moderne Haptiken knackig und subtil, konzipiert, um sich wie ein physischer Klick anzufühlen, nicht wie ein Alarm.

In nativen iOS-Apps verwenden Entwickler die UIFeedbackGenerator API, um verschiedene haptische Muster abzuspielen, wie einen leichten Tipp, einen "Erfolgs"-Doppeltipp oder einen "Fehler"-Dreifachtipp. Lange Zeit hatte die Webplattform auf iOS Safari kein Äquivalent — navigator.vibrate() wurde auf iPhones einfach ignoriert. Die ios-haptics Bibliothek nutzt einen Nebeneffekt des <input type="checkbox" switch> Elements (eingeführt in Safari 17.4): Das Umschalten dieses Schalters löst die System-Haptic-Engine aus, was es Webseiten ermöglicht, kurze haptische Muster aus JavaScript abzuspielen.

Werkzeugbeschreibung

Der iOS Haptics Tester ermöglicht es Ihnen, haptische Feedback-Muster direkt aus Ihrem Browser auszulösen, um zu überprüfen, ob Ihr Gerät und Ihre OS-Version diese unterstützen. Er stellt die drei Muster bereit, die von der ios-haptics Bibliothek bereitgestellt werden — ein einzelner Tipp, eine "Bestätigung" (zwei schnelle Tipps) und ein "Fehler" (drei schnelle Tipps) — und enthält auch eine Schaltfläche, die die Standard-navigator.vibrate() API als Fallback für Android und andere Geräte aufruft.

Beispiele

Aktion Erwartetes Gefühl auf iPhone (iOS 17.4–26.4) Erwartetes Gefühl auf Android
Einzelnes haptisches Feedback Ein kurzer, knackiger Tipp Eine kurze Vibration (~200 ms)
Bestätigung (zwei schnelle Tipps) Zwei schnelle Tipps hintereinander Zwei kurze Vibrationen
Fehler (drei schnelle Tipps) Drei schnelle Tipps hintereinander Drei kurze Vibrationen
navigator.vibrate() testen Nichts auf den meisten iOS-Versionen Eine ~200 ms Vibration

Funktionen

  • Ein-Tipp-Schaltflächen für einzelne, Bestätigungs- und Fehler-Haptik-Muster
  • Automatische Erkennung der Haptic-Unterstützung auf dem aktuellen Gerät
  • Integrierter Fallback-Test für die Standard-navigator.vibrate() Web API
  • Live-Ereignisprotokoll mit Zeitstempeln für jedes ausgelöste Muster
  • Klare Statusbanner, die iOS-Versionskompatibilität erklären

Anwendungsfälle

  • Webentwickler, die überprüfen, dass haptisches Feedback auf einem echten iPhone funktioniert, bevor sie ios-haptics in ihre eigene Website oder PWA integrieren
  • QA-Ingenieure, die überprüfen, wie sich die gleichen Muster auf verschiedenen Geräten, OS-Versionen und Browsern anfühlen
  • Neugierige Benutzer, die den Unterschied zwischen iOS-stilem "Taptic"-Feedback und dem längeren Android navigator.vibrate() Impuls erleben möchten

Wie es funktioniert

In iOS Safari erstellt das Tool dynamisch ein verstecktes <input type="checkbox" switch>, schaltet es um und entfernt es dann aus dem DOM. Das Umschalten dieses nativen Schalters ist das, was die Taptic Engine auslöst — es gibt keine öffentliche Web API, die dies direkt tut. Die "Bestätigungs"- und "Fehler"-Muster wiederholen das Umschalten einfach zweimal oder dreimal in schneller Abfolge.

Auf Geräten, die den iOS-Switch-Trick nicht unterstützen, fällt die Bibliothek auf navigator.vibrate() zurück, das auf Android-Browsern weit verbreitet ist. Die Schaltfläche "Test navigator.vibrate()" in diesem Tool ruft diese API direkt auf, damit Sie die beiden Mechanismen vergleichen können.

Optionen erklärt

  • Einzelnes haptisches Feedback — Spielt einen kurzen Tipp ab. Am besten für kleine Interaktionen wie einen Schalter oder ein erfolgreiches Formularfeld geeignet.
  • Bestätigung (zwei schnelle Tipps) — Spielt zwei schnelle Tipps ab. Ideal für "gespeichert", "gesendet" oder andere positive Bestätigungen.
  • Fehler (drei schnelle Tipps) — Spielt drei schnelle Tipps ab. Verwenden Sie dies, um Validierungsfehler oder destruktive Fehler zu signalisieren.
  • Test navigator.vibrate() — Ruft die Web Vibration API mit einer Dauer von 200 ms auf. Nützlich zur Bestätigung der Unterstützung für Nicht-iOS-Geräte und zum Vergleich des Gefühls mit den iOS-Mustern.
  • Protokoll löschen — Entfernt alle Einträge aus dem Ereignisprotokoll.

Einschränkungen

  • Programmatische iOS-Haptiken funktionieren nur auf iOS 17.4 bis 26.4. Apple hat das zugrunde liegende Verhalten in iOS 26.5 gepatcht, daher löst das Aufrufen dieser Muster aus JavaScript auf den neuesten iOS-Versionen die Taptic Engine nicht mehr aus. Die direkte Benutzerinteraktion mit einem echten <input type="checkbox" switch> funktioniert weiterhin.
  • iOS Safari ignoriert navigator.vibrate() auf praktisch allen Versionen, daher wird die Fallback-Schaltfläche auf iPhones stumm erscheinen.
  • Desktop-Browser können kein haptisches Feedback erzeugen; die Schaltflächen werden ausgeführt, aber Sie werden nichts spüren.
  • Einige Android-Browser erfordern, dass die Seite im Vordergrund ist und eine Benutzergeste vorhanden ist, bevor navigator.vibrate() ausgelöst wird.
  • Haptisches Feedback kann auch in den Systemeinstellungen des Geräts deaktiviert sein (z. B. Einstellungen → Töne & Haptik → System-Haptik auf iOS).

Tipps

  • Testen Sie auf einem echten Gerät, nicht auf einem Simulator oder Emulator — virtuelle Geräte haben keine Taptic Engine.
  • Wenn auf dem iPhone nichts passiert, überprüfen Sie, dass System-Haptik in den Einstellungen aktiviert ist und dass der Stummschalter sie auf älteren iOS-Versionen nicht unterdrückt.
  • Verwenden Sie das Bestätigungsmuster sparsam; Übernutzung von schnellen Haptiken wird schnell lästig.
  • Kombinieren Sie Haptiken mit visuellen Rückmeldungen — eine Haptik allein reicht selten aus, um den Status dem Benutzer zu vermitteln.

Häufig gestellte Fragen

Warum spüre ich nichts auf meinem iPhone? Sie sind wahrscheinlich auf iOS 26.5 oder neuer, wo Apple die von dieser Bibliothek verwendete Technik gepatcht hat. Versuchen Sie ein Gerät mit iOS 17.4–26.4, oder überprüfen Sie, dass System-Haptik in den Einstellungen aktiviert ist.

Warum funktioniert navigator.vibrate() nicht auf iPhone? Apple hat die Web Vibration API in iOS Safari nie implementiert. Es gibt derzeit keine standardisierte Möglichkeit, Vibrationen auf iOS von einer Webseite aus auszulösen.

Ist dies sicher für die Verwendung in der Produktion? Die Bibliothek ist klein und nebenwirkungsfrei, aber da sie auf einer Eigenheit eines bestimmten HTML-Elements beruht, kann sie bei jedem zukünftigen iOS-Update unterbrochen werden — wie bereits in iOS 26.5 geschehen. Behandeln Sie haptisches Feedback immer als progressive Verbesserung, nie als Anforderung.

Funktioniert es in einer PWA oder "Zum Startbildschirm hinzufügen"-App? Ja, auf unterstützten iOS-Versionen funktioniert die gleiche Technik in installierten Web-Apps genauso wie in Safari.