Brm, Brm!
Interaksie met die gebruiker op 'n 'sensuele' vlak kan die gebruikerservaring van u app aansienlik verbeter. Gewoonlik moet ons as ontwikkelaars ons beperk tot fyn animasies, soos parallaks-effekte of 3D-weergawes om 'n meer realistiese gevoel in ons programme oor te dra. Maar het u geweet dat Progressive Web Apps soveel meer kan lewer? Vandag kyk ons na die haptiese kant van interaksies tussen die internet en die gebruiker.
Rumble in die (dev-) oerwoud
Soos tans geskryf, bied nie alle omgewings ondersteuning vir die nuwe Vibration-API nie. Spesifiek, elke Chromium- en Firefox-blaaier kan gebruik word, terwyl elke variant van Safari / WebKit geen ondersteuning het nie. Opmerking: elke blaaier op iOS gebruik WebKit as enjin.
Die gebruik van die API self is so eenvoudig as wat dit word. Hier is 'n voorbeeld:
// 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]);
}
Om te bewys dat hierdie kode werk, tik u eenvoudig op die kopieerknop in die regterkantste hoek van die kode. As u toestel dit ondersteun, moet 'n sagte trilling begin word om die kopie-na-klembord-aksie te erken.
Ons is amper klaar, kom ons kyk net na die laaste funksies van die API:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
En dit gaan daaroor! Nie veel om te bedek nie, maar korrek toegepas, dit wil sê nie te veel in u app nie, en slegs wanneer dit van toepassing is, is die vibrasie-API 'n wonderlike funksie om te gebruik. Ek dink die beste gebruiksgeval is om belangrike aksies wat die gebruiker uitgevoer het, hapties te bevestig of te ontken, bv. die kopie-aksie vir kode in hierdie geval of 'n permanente verwyderingsaksie in 'n ander app.
- Tom
