Brm, Brm!
Η αλληλεπίδραση με τον χρήστη σε "αισθησιακό" επίπεδο μπορεί να βελτιώσει σημαντικά την εμπειρία χρήστη της εφαρμογής σας. Συνήθως, εμείς ως devs πρέπει να περιοριζόμαστε σε φανταχτερά κινούμενα σχέδια, όπως εφέ παράλλαξης ή 3D-renders για να μεταφέρουμε μια πιο ρεαλιστική αίσθηση μέσα στις εφαρμογές μας. Γνωρίζατε όμως ότι οι Προοδευτικές Εφαρμογές Ιστού μπορούν να προσφέρουν πολύ περισσότερα; Σήμερα θα ρίξουμε μια ματιά στην απτική πλευρά των αλληλεπιδράσεων μεταξύ του ιστού και του χρήστη.
Rumble στη (dev-) ζούγκλα
Από τη στιγμή της γραφής, δεν παρέχουν όλα τα περιβάλλοντα υποστήριξη για το νέο Vibration-API. Συγκεκριμένα, μπορεί να χρησιμοποιηθεί κάθε πρόγραμμα περιήγησης Chromium και Firefox, ενώ κάθε παραλλαγή του Safari / WebKit δεν έχει υποστήριξη. Σημείωση: κάθε πρόγραμμα περιήγησης στο iOS χρησιμοποιεί το WebKit ως μηχανή του.
Η χρήση του ίδιου του API είναι τόσο απλή όσο γίνεται. Ακολουθεί ένα παράδειγμα:
// 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]);
}
Για να αποδείξετε ότι αυτός ο κώδικας λειτουργεί, απλώς πατήστε το κουμπί αντιγραφής στην κάτω δεξιά γωνία του αποσπάσματος κώδικα. Εάν η συσκευή σας το υποστηρίζει, τότε θα πρέπει να ξεκινήσει μια απαλή δόνηση για να αναγνωριστεί η ενέργεια αντιγραφής στο πρόχειρο.
Έχουμε σχεδόν τελειώσει, ας ρίξουμε μια ματιά στις τελευταίες δυνατότητες του API:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
Και αυτό είναι! Όχι πολύ για κάλυψη, αλλά εφαρμόστηκε σωστά, δηλαδή όχι πάρα πολύ στην εφαρμογή σας και μόνο όταν είναι εφαρμόσιμο, το API δόνησης είναι μια πραγματικά εξαιρετική δυνατότητα χρήσης. Πιστεύω ότι η καλύτερη περίπτωση χρήσης είναι η απτική επιβεβαίωση ή άρνηση σημαντικών ενεργειών που έχει κάνει ο χρήστης, π.χ. το αντίγραφο-ενέργεια για κώδικα σε αυτήν την περίπτωση ή μια μόνιμη ενέργεια διαγραφής σε άλλη εφαρμογή.
- Tom
