Brm, Brm!
A felhasználóval „érzéki” szinten történő interakció jelentősen javíthatja alkalmazásának felhasználói élményét. Általában nekünk, mint fejlesztőknek, fantasztikus animációkra kell korlátoznunk magunkat, mint például a parallaxis effektusok vagy a 3D-leképezések, hogy reálisabb érzetet közvetítsünk az alkalmazásunkban. De tudta, hogy a Progresszív Webalkalmazások sokkal többet tudnak nyújtani? Ma megvizsgáljuk az internet és a felhasználó közötti interakciók haptikus oldalát.
Dübörgés a (dev-) dzsungelben
A cikk írása szerint nem minden környezet nyújt támogatást az új Vibration-API számára. Pontosabban, minden Chromium és Firefox böngésző használható, míg a Safari / WebKit minden változata nem támogatott. Megjegyzés: Az iOS minden böngészője a WebKit programot használja.
Maga az API használata a lehető legegyszerűbb. Íme egy példa:
// 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]);
}
Annak igazolására, hogy ez a kód működik, egyszerűen érintse meg a másolás gombot a kódrészlet jobb alsó sarkában. Ha készüléke támogatja, akkor a vibrálás a vágólapra műveletet nyugtázni kell.
Már majdnem készen vagyunk, vessünk egy pillantást az API utolsó szolgáltatásaira:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
És kb ennyi! Nem sokat kell lefedni, de helyesen alkalmazzák, vagyis nem túl sokat az alkalmazásában, és csak akkor, ha alkalmazható, a vibration-API valóban kiváló funkció. Szerintem a legjobb felhasználási eset az, ha haptikusan megerősít vagy megtagad a felhasználó által végrehajtott fontos intézkedéseket, pl. a kód másolása-művelet ebben az esetben vagy egy végleges törlés-művelet egy másik alkalmazásban.
- Tom