JavaScript Vibration API

Einführung in die Vibration API

Die Vibration API ermöglicht es Webseiten, den Vibrationsmotor eines Geräts anzusteuern und so haptisches (tastbasiertes) Feedback zu geben. Sie ist für Mobiltelefone und Tablets gedacht, die physisch vibrieren können — auf einem Desktop ohne Motor werden die Aufrufe lautlos akzeptiert und haben keine Wirkung.

Die gesamte API besteht aus einer einzigen Methode, navigator.vibrate(). Es gibt keine Berechtigungsabfrage und kein Ereignis, auf das gewartet werden muss: Man ruft sie auf, und das Gerät vibriert. Der Kompromiss besteht darin, dass Browser einschränken, wann man sie aufrufen darf — dieses Kapitel erklärt das im Detail.

Diese Seite behandelt die zwei Argumentformen der Methode, das Stoppen einer Vibration, die Feature-Erkennung, die Einschränkungen bezüglich Nutzergesten und mobiler Geräte sowie den tastevollen Einsatz von Vibration.

Die Methode navigator.vibrate()

navigator.vibrate() akzeptiert einen von zwei Argumenttypen:

• Eine einzelne Zahl — einmalig für die angegebene Anzahl von Millisekunden vibrieren.
• Ein array von Zahlen — ein Muster aus abwechselnden Vibrations- und Pausendauern.

Sie gibt einen boolean-Wert zurück: true, wenn die Anfrage akzeptiert wurde, false, wenn sie abgelehnt wurde (zum Beispiel wenn keine Nutzergeste stattgefunden hat). Auf Geräten ohne Motor gibt die Methode weiterhin true zurück, erzeugt aber keine Vibration.

// Single vibration for 500 milliseconds
navigator.vibrate(500);

Vibrationsmuster

Wenn ein array übergeben wird, werden die Zahlen als vibrieren, pausieren, vibrieren, pausieren, … interpretiert. Einträge mit ungeradem Index sind stille Pausen.

// Vibrate 200 ms, pause 100 ms, vibrate 400 ms
navigator.vibrate([200, 100, 400]);

// "Morse"-like triple buzz: buzz, gap, buzz, gap, buzz
navigator.vibrate([100, 50, 100, 50, 100]);

Eine abschließende Pause hat keine Wirkung, da danach nichts mehr zu vibrieren ist.

Eine Vibration stoppen

Ein neuer Aufruf ersetzt jede laufende Vibration. Um eine Vibration sofort abzubrechen, übergibt man 0 oder ein leeres array:

navigator.vibrate(0);   // stop immediately
navigator.vibrate([]);  // also stops — equivalent to 0

Das ist praktisch, um Feedback zurückzusetzen, wenn ein Benutzer eine Benachrichtigung schließt oder die Seite verlässt.

Feature-Erkennung

navigator.vibrate ist undefined in nicht unterstützten Browsern, weshalb ein direkter Aufruf einen Fehler werfen würde. Jeden Aufruf absichern:

function buzz(pattern) {
  if ('vibrate' in navigator) {
    return navigator.vibrate(pattern);
  }
  return false; // API not available — fall back to a visual cue
}

buzz(200);
buzz([100, 50, 100]);

Die Erkennung selbst kann überall ausgeführt werden — auch in Node.js oder einem Desktop-Browser — auch wenn die eigentliche Vibration nur auf unterstützter Hardware stattfindet.

Praktische Anwendungsfälle

Das Verständnis, wie die Vibration API effektiv in Webanwendungen eingesetzt werden kann, kann das Engagement und die Zufriedenheit der Nutzer erheblich steigern. Nachfolgend sind Beispiele für praktische Anwendungen aufgeführt, die die Vielseitigkeit der Vibration API veranschaulichen.

Feedback bei Nutzeraktionen

Ein kurzes Summen bestätigt einen Tipp auf Geräten, bei denen der Nutzer nicht immer sehen kann, wie der Bildschirm reagiert. Der Click-Handler selbst ist die Nutzergeste, daher ist der Aufruf zulässig:

document.getElementById('button').addEventListener('click', () => {
  if ('vibrate' in navigator) {
    navigator.vibrate(100); // brief confirmation buzz
  }
});

Benachrichtigungshinweise

Wenn ein akustisches oder visuelles Signal übersehen werden könnte oder unangemessen ist (Lautlos-Modus, Barrierefreiheit), kann ein charakteristisches Muster als Ersatz dienen:

function alertUser() {
  if ('vibrate' in navigator) {
    navigator.vibrate([500, 200, 500]); // buzz, pause, buzz
  }
}

Spielerlebnisse verbessern

In Webspielen fügt Vibration an entscheidenden Momenten physisches Feedback hinzu — aber nur, wenn der Moment auf eine kürzliche Nutzereingabe folgt, andernfalls wird der Aufruf ignoriert:

function gameOver() {
  if ('vibrate' in navigator) {
    navigator.vibrate(1000); // one long buzz signals game over
  }
}

Einschränkungen, die eingeplant werden müssen

Die Vibration API wirkt trivial, aber Browser umhüllen sie mit Einschränkungen, die sie still und leise wirkungslos machen:

• In der Praxis nur mobil. Vibration erfordert einen Hardware-Motor. Desktop-Browser verfügen entweder gar nicht über die Methode (Safari, Firefox auf Desktop) oder akzeptieren den Aufruf ohne zu vibrieren. Vibration sollte als Verbesserung betrachtet werden, niemals als einziges Feedback.
• Erfordert eine Nutzergeste. Moderne Browser ignorieren navigator.vibrate(), sofern es nicht als Reaktion auf eine echte Interaktion (Tipp, Klick oder Tastendruck) aufgerufen wird. Eine Vibration, die beim Seitenaufruf, aus einem setTimeout oder aus einem Hintergrundereignis ausgelöst wird, wird lautlos verworfen — die Methode gibt false zurück. Vibration direkt in einem Event-Handler auslösen.
• Keine Berechtigung, kein Feedback-Kanal. Es gibt keine Abfrage und kein Fehlerereignis; ein abgelehnter Aufruf gibt einfach false zurück. Diesen Rückgabewert prüfen, wenn man wissen möchte, ob es funktioniert hat.
• Ausgeblendete Tabs werden blockiert. Wenn die Seite nicht sichtbar ist (Tab im Hintergrund), wird die Anfrage ignoriert.
• Muster sind begrenzt. Browser begrenzen die maximale Gesamtdauer und die Anzahl der Einträge in einem Muster; extrem lange Vibrationen werden abgeschnitten.

Best Practices und Überlegungen

Obwohl die Vibration API neue Möglichkeiten für das Nutzerengagement eröffnet, sollte ihre Implementierung mit Blick auf die Benutzererfahrung erfolgen.

• Nutzerpräferenzen respektieren: Immer eine Option anbieten, mit der Nutzer Vibrationsfeedback deaktivieren können, um denjenigen entgegenzukommen, die es als störend empfinden oder Barrierefreiheitsbedenken haben.
• Akkuverbrauch: Den möglichen Einfluss auf die Akkulaufzeit des Geräts im Auge behalten, insbesondere bei ausgiebiger Nutzung von Mustern oder langen Vibrationen.
• Auf mehreren Geräten testen: Vibrationsintensität und Mustererkennung können je nach Gerät erheblich variieren. Tests auf verschiedenen Geräten stellen eine einheitliche Benutzererfahrung sicher.
• Browser-Kompatibilität: Die Vibration API wird hauptsächlich von mobilen Browsern (Chrome, Firefox, Edge) unterstützt. Sie wird in Safari und den meisten Desktop-Browsern nicht unterstützt. Die Unterstützung immer vor der Implementierung überprüfen.

Fazit

Die Vibration API von JavaScript bietet mit einer einzigen Methode, navigator.vibrate(), eine praktische Möglichkeit, Nutzer durch taktiles Feedback einzubinden. Die wesentlichen Punkte: Feature-Erkennung vor dem Aufruf, Auslösung nur durch Nutzergesten, Mobile-First-Ansatz und immer eine visuelle oder akustische Alternative bereitstellen, damit auf nicht unterstützten Geräten nichts verloren geht.

Um weitere gerätebewusste Browser-APIs zu entdecken, siehe die Screen Orientation API für die Reaktion auf Hoch-/Querformat-Änderungen, die Geolocation API für Standortdaten und Browser-Umgebung, Spezifikationen dafür, wie navigator und andere Host-Objekte zusammenpassen.

Übung