PWA rezgés API

Használjuk a navigátort az eszköz megrázásához

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