Was ist die Vibration API?

Die Vibration API (navigator.vibrate()) ist ein Browser-Standard, der Webseiten ermöglicht, den physischen Vibrationsmotor in Smartphones und einigen Tablets auszulösen. Sie akzeptiert entweder eine einzelne Dauer in Millisekunden oder ein abwechselndes Array von Vibrations-/Pausendauern – genannt ein Vibrationsmuster. Die API wird in den meisten Android-Browsern unterstützt; iOS stellt Vibrationen für Webseiten aufgrund von Plattformbeschränkungen nicht zur Verfügung.

Vibrationsmuster werden als Arrays beschrieben, bei denen ungerade indizierte Werte Vibrationsdauern darstellen und gerade indizierte Werte Pausendauern darstellen. Zum Beispiel bedeutet [200, 100, 200] 200 ms vibrieren, 100 ms pausieren, 200 ms vibrieren. Das Aufrufen von navigator.vibrate(0) oder navigator.vibrate([]) bricht jede laufende Vibration sofort ab.

Werkzeugbeschreibung

Dieses Werkzeug ermöglicht es dir zu testen, ob dein Gerät die Vibration API unterstützt, und mit Vibrationsmustern direkt im Browser zu experimentieren. Du kannst einen einzelnen Impuls mit konfigurierbarer Dauer auslösen, ein vollständig benutzerdefiniertes kommagetrennte Muster eingeben oder aus integrierten Voreinstellungen wie SOS, Herzschlag und Doppel-/Dreifachimpulsen wählen. Ein Ereignisprotokoll zeichnet jeden Vibrationsversuch mit einem Zeitstempel und dem verwendeten genauen Muster auf, sodass du Ergebnisse über verschiedene Geräte und Browser hinweg vergleichen kannst.

Beispiele

Mustereingabe Was passiert
300 Einzelner Impuls mit einer Dauer von 300 ms
200,100,200 200 ms vibrieren → 100 ms pausieren → 200 ms vibrieren
150,100,150,100,150 Drei kurze Impulse mit 100 ms Abständen dazwischen
0 Bricht jede laufende Vibration ab

Funktionen

  • Erkennt, ob das Gerät und der Browser die Vibration API unterstützen, und zeigt den Status beim Laden an
  • Einstellbare Einzelimpulsdauer von 10 ms bis 5000 ms über einen Schieberegler
  • Benutzerdefinierte Mustereingabe akzeptiert jede kommagetrennte Abfolge von Vibrations- und Pausendauern
  • Sechs einsatzbereite Voreinstellungen: Kurzer Impuls, Langer Impuls, Doppelimpuls, Dreifachimpuls, SOS-Muster und Herzschlag
  • Ereignisprotokoll mit Zeitstempeln, das jedes ausgelöste Muster und ob es vom Browser akzeptiert oder abgelehnt wurde, anzeigt

Anwendungsfälle

  • Mobile Webentwicklung: Überprüfe, dass haptisches Feedback, das mit der Vibration API implementiert ist, auf einem Zielgerät tatsächlich funktioniert, bevor du die Funktion bereitstellst.
  • QA-Gerätetests: Bestätige schnell, dass der Vibrationsmotor auf einem neu erhaltenen oder reparierten Smartphone funktioniert, ohne eine native App zu installieren.
  • Musterprototypisierung: Iteriere über benutzerdefinierte Vibrationssequenzen (Benachrichtigungswarnungen, Spielfeedback, Barrierefreiheitshinweise), indem du sie live im Browser testest.

Wie es funktioniert

Das Werkzeug ruft navigator.vibrate(pattern) mit dem von dir bereitgestellten Wert auf. Der Browser gibt true zurück, wenn der Aufruf akzeptiert wurde, und false, wenn er abgelehnt wurde – zum Beispiel, weil das Dokument nicht fokussiert ist oder das Gerät die API nicht unterstützt. Beide Ergebnisse werden im Ereignisprotokoll aufgezeichnet. Die gesamte Verarbeitung erfolgt vollständig auf dem Gerät; es werden keine Daten an einen Server gesendet.

Einschränkungen

  • iOS (Safari, Chrome auf iOS): Apple stellt navigator.vibrate() auf iOS nicht zur Verfügung, daher wird die API auf iPhones und iPads immer als nicht unterstützt gemeldet.
  • Desktop-Browser: Desktop-Computer haben in der Regel keinen Vibrationsmotor, daher hat die API selbst wenn sie verfügbar ist, keine physische Auswirkung.
  • Hintergrund-Tabs: Einige Browser lehnen Vibrationsaufrufe stillschweigend ab, wenn die Seite nicht im Vordergrund ist.
  • Maximale Dauer: Einzelne Vibrationssegmente sind durch den Browser begrenzt (üblicherweise etwa 10 Sekunden); sehr große Werte können stillschweigend gekürzt werden.