Arbeiten mit der Browser Vibration API

Progressive Web Apps (PWAs) sind in letzter Zeit in aller Munde. Der Begriff bezeichnet Web-Applikationen, die zusätzlich zu ihren Basis Web-Features einige weitere Features bieten, die ursprünglich nur nativen Apps vorbehalten waren. Am häufigsten genannt werden hier zum Beispiel Offline-Fähigkeit, Push-Notification Unterstützung und Installierbarkeit auf dem Home-Screen. Es gibt aber noch eine Vielzahl von weiteren Features und diese Liste wächst stetig weiter. Ein (zumindest in meiner Wahrnehmung) bisher wenig beachtetes und verwendetes Feature ist die Möglichkeit, die Vibrationsfähigkeit eines Endgeräts zu nutzen.

Ich bin mehr oder weniger zufällig über dieses interessante Feature gestolpert und ein wenig verwundert darüber, dass es bis jetzt sehr wenig genutzt wird, bietet es doch eine zusätzliche - in mobilen Apps schon sehr verbreitete - Methode, dem User Feedback über eine ausgeführte Aktion zu liefern: die Haptik. Eine mögliche Erklärung: dies funktioniert natürlich nur bei Geräten mit der Fähigkeit zur Vibration, also zum Großteil mobilen Geräten. Desktop-PCs oder Notebooks sind hiervon ausgeschlossen. Da ein Großteil des Traffics aber mittlerweile über mobile Endgeräte erfolgt, bietet sich hier eine interessante Gelegenheit, die User Experience dieser Benutzer um haptisches Feedback zu erweitern. Insbesondere durch die rein additive Art dieser Funktion müssen keine Kompromisse eingegangen werden: unterstütze Geräte bekommen das Feature, andere eben nicht, verlieren aber auch nichts im Vergleich zu vorher.

Die Browser Vibration API

Zur Verwendung der Vibrations-Funktionalität wird die Vibration API verwendet. Der Funktion vibrate kann dabei als Parameter entweder eine Zahl (Länge der Vibration in Millisekunden) oder ein Array an Zahlen (abwechselnd Länge der Vibration und Länge der Pause) übergeben werden.

window.navigator.vibrate(200) // vibrate 200mswindow.navigator.vibrate([200, 500, 200]) // vibrate 200ms, pause 500ms, vibrate 200ms

Wie man sieht ist es extrem einfach, diese Funktion zu implementieren. Bei der Verwendung sollte man aber immer zuerst einen Verfügbarkeits-Check machen, bevor man versucht, die Funktion zu verwenden.

if ('vibrate' in window.navigator) {  // supported} else {  // not supported}

Unterstützt werden aktuell nur Android-Geräte, da Safari und damit auch iOS Safari die API noch nicht unterstützen (looking at you Apple 🧐)

Beispiel Usecase: Shopware PWA Plugin

Als Beispiel Usecase habe ich ein Plugin für Shopware PWA entwickelt, welches es ermöglicht, für bestimmte Ereignisse in der Applikation eine Vibration des Geräts auszulösen. Nach der Installation und Einbindung des Plugins wird standardmäßig bei folgenden Aktionen ein kurzer Vibrations Impuls ausgelöst:

• Hinzufügen eines Produkts zum Warenkorb
• Hinzufügen eines Gutscheincodes

Diese Liste an Aktionen ist komplett konfigurierbar und kann beliebig erweitert bzw. verändert werden. Die Aktionen werden dabei über das Interceptor Feature abgefangen, sollen also neben der Liste der bereits verfügbaren Aktionen eigene Aktionen verwendet werden, sollte dafür ein eigenes Event ausgelöst werden (siehe Dokumentation: Broadcast custom event).

Besonders praktisch ist die Möglichkeit, neben der Aktion auch die Vibrationsart frei bestimmen zu können: so kann man nach Belieben die Länge der Vibration bestimmen, als auch ein eigenes Vibrationsmuster bestimmen. Beispielsweise kann so anstelle eines kurzen Impulses ein Dreifach-Impuls konfiguriert werden, sodass dass Gerät dreimal kurz hintereinander vibriert.

Weitere Details zum Plugin, z.B. zur Installation, den verfügbaren Optionen und mehr, sind auf Github und NPM verfügbar.
NPM: https://www.npmjs.com/package/shopware-pwa-vibration
Github: https://github.com/niklaswolf/shopware-pwa-vibration

Fazit

Die Vibration API ist extrem einfach in der Benutzung. Durch ihre additive Natur bringt sie keine Nachteile mit sich, unterstützte Geräte bekommen die Möglichkeit für haptisches Feedback an den User hinzu. Dies trägt weiter zur Verschmelzung von nativen Apps und Progressive Web Apps bei.
Über die API sind einfache Vibrationen ebenso möglich wie komplexe Vibrationsmuster. Wie viele Dinge sollte Vibration überlegt, sparsam und nur an den Stellen eingesetzt werden, an denen sie für den User auch einen Mehrwert bietet, um eine Überforderung zu vermeiden. Richtig verwendet trägt haptisches Feedback aber sicher zu einer Verbesserung der User Experience bei.