Brm, Brm!
L'interazione con l'utente a livello "sensuale" può migliorare notevolmente l'esperienza utente della tua app. In genere, noi sviluppatori dobbiamo limitarci a animazioni fantasiose, come effetti di parallasse o rendering 3D per trasmettere una sensazione più realistica all'interno delle nostre app. Ma sapevi che le Progressive Web App possono offrire molto di più? Oggi daremo uno sguardo al lato tattile delle interazioni tra il web e l'utente.
Rumble nella (dev-)jungle
Al momento della scrittura, non tutti gli ambienti forniscono supporto per la nuova Vibration-API. In particolare, è possibile utilizzare tutti i browser Chromium e Firefox, mentre ogni variante di Safari/WebKit non ha supporto. Nota: ogni browser su iOS utilizza WebKit come motore.
L'utilizzo dell'API stessa è semplicissimo. Ecco un esempio:
// 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]);
}
Per provare che questo codice funziona, tocca semplicemente il pulsante di copia nell'angolo in basso a destra dello snippet di codice. Se il tuo dispositivo lo supporta, dovrebbe essere avviata una leggera vibrazione per riconoscere l'azione di copia negli appunti.
Abbiamo quasi finito, diamo solo un'occhiata alle ultime funzionalità dell'API:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
E questo è tutto! Non c'è molto da coprire, ma applicato correttamente, cioè non troppo nella tua app e solo quando è applicabile, l'API di vibrazione è una funzionalità davvero eccezionale da usare. Penso che il miglior caso d'uso sia confermare o negare tattilmente azioni importanti che l'utente ha fatto, ad es. l'azione di copia per il codice in questo caso o un'azione di eliminazione permanente in un'altra app.
- Tom
