Brm, Brm!
Die Interaktion mit dem Benutzer auf einer „sinnlichen“ Ebene kann die Benutzererfahrung Ihrer App erheblich verbessern. Normalerweise müssen wir uns als Entwickler auf ausgefallene Animationen wie Parallax-Effekte oder 3D-Renderings beschränken, um ein realistischeres Gefühl in unseren Apps zu vermitteln. Aber wussten Sie, dass Progressive Web Apps so viel mehr bieten können? Heute werfen wir einen Blick auf die haptische Seite der Interaktionen zwischen Web und Benutzer.
Rumpeln im (Entwickler-) Dschungel
Zum jetzigen Zeitpunkt bieten nicht alle Umgebungen Unterstützung für die neue Vibration-API. Konkret kann jeder Chromium- und Firefox-Browser verwendet werden, während jede Variante von Safari/WebKit keine Unterstützung hat. Hinweis: Jeder Browser auf iOS verwendet WebKit als Engine.
Die Verwendung der API selbst ist so einfach wie es nur geht. Hier ist ein Beispiel:
// All examples assume that we have
// access to the 'window' and use Typescript.
// Specifically, we're using optional chaining
// for simplified handling of undefined if no
// API is available.
const vibrateOnceOnClick = () => {
// A simple one-liner is all that's needed.
// To use a single vibration, we simple
// provide an integer representing the ms
// a single pulse should last.
window.navigator?.vibrate?.(200);
}
const vibratePatternOnClick = () => {
// For more than one puse, an array has to be
// provided, again defining each pulse's lenght
// in milliseconds.
window.navigator?.vibrate?.([50, 200, 50, 200]);
}
Um zu beweisen, dass dieser Code funktioniert, tippen Sie einfach auf die Schaltfläche zum Kopieren in der unteren rechten Ecke des Code-Snippets. Wenn Ihr Gerät dies unterstützt, sollte eine sanfte Vibration gestartet werden, um das Kopieren in die Zwischenablage zu bestätigen.
Wir sind fast fertig, werfen wir einen Blick auf die letzten Funktionen der API:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
Und das war's! Nicht viel zu behandeln, aber richtig angewendet, d.h. nicht zu viel in Ihrer App und nur wenn es anwendbar ist, ist die Vibrations-API ein wirklich tolles Feature. Ich denke, der beste Anwendungsfall besteht darin, wichtige Aktionen des Benutzers haptisch zu bestätigen oder abzulehnen, z. die Kopieraktion für Code in diesem Fall oder eine dauerhafte Löschaktion in einer anderen App.
- Tom
