اهتزاز PWA API

دعنا نستخدم الملاح لهز جهازك

Brm ، Brm!

يمكن أن يؤدي التفاعل مع المستخدم على المستوى "الحسي" إلى تحسين تجربة المستخدم لتطبيقك بشكل كبير. عادةً ، يتعين علينا كمطورين أن نحصر أنفسنا في الرسوم المتحركة الرائعة ، مثل تأثيرات المنظر أو العروض ثلاثية الأبعاد لنقل شعور أكثر واقعية داخل تطبيقاتنا. لكن هل تعلم أن تطبيقات الويب التقدمية يمكنها تقديم المزيد؟ سنلقي اليوم نظرة على الجانب اللمسي للتفاعلات بين الويب والمستخدم.

قعقعة في الغابة (dev-)

حتى كتابة هذه السطور ، لا توفر جميع البيئات الدعم لـ Vibration-API الجديد. على وجه التحديد ، يمكن استخدام كل متصفح Chromium و Firefox ، بينما لا يدعم كل متغير من Safari / WebKit. ملاحظة: يستخدم كل متصفح على نظام iOS WebKit كمحرك له.

يعد استخدام واجهة برمجة التطبيقات نفسها بسيطًا كما هو الحال. هذا مثال:

// 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]);
}

لإثبات أن هذا الرمز يعمل ، ما عليك سوى النقر فوق زر النسخ في الزاوية اليمنى السفلية من مقتطف الرمز. إذا كان جهازك يدعمها ، فيجب بدء اهتزاز لطيف للإقرار بإجراء النسخ إلى الحافظة.

لقد أوشكنا على الانتهاء ، دعنا فقط نلقي نظرة على الميزات الأخيرة لواجهة برمجة التطبيقات:

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

الاقتراحات

ذات صلة

ملحق

اللغات