ממשק API לרטט PWA

Brm, Brm!

אינטראקציה עם המשתמש ברמה "חושנית" יכולה לשפר מאוד את חווית המשתמש באפליקציה שלך. בדרך כלל, עלינו כמפתחים להגביל את עצמנו לאנימציות מהודרות, כגון אפקטים של פרלקסה או עיבוד תלת מימד כדי להעביר תחושה מציאותית יותר בתוך האפליקציות שלנו. אבל האם ידעת שאפליקציות אינטרנט מתקדמות יכולות לספק כל כך הרבה יותר? היום נסתכל על הצד ההפטי באינטראקציות בין האינטרנט למשתמש.

טרטור בג'ונגל (dev-)

נכון לכתיבת שורות אלה, לא כל הסביבות מספקות תמיכה בממשק ה- Vibration החדש. באופן ספציפי, ניתן להשתמש בכל כרומיום ודפדפן פיירפוקס, ואילו לכל גרסה של 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);
}

וזה בערך זה! לא הרבה כדי לכסות, אבל מיושם כראוי, כלומר לא יותר מדי באפליקציה שלך ורק כשהוא ישים, ה- vibration-API הוא תכונה נהדרת לשימוש. אני חושב שמקרה השימוש הטוב ביותר הוא לאשש או להכחיש פעולות חשובות שהמשתמש ביצע, למשל. פעולת ההעתקה לקוד במקרה זה או פעולת מחיקה קבועה באפליקציה אחרת.

• Tom