PWA titreşim API'si

Brm, Brm!

Kullanıcıyla "duygusal" düzeyde etkileşim, uygulamanızın kullanıcı deneyimini büyük ölçüde iyileştirebilir. Genellikle geliştiriciler olarak, uygulamalarımızın içinde daha gerçekçi bir his vermek için kendimizi paralaks efektleri veya 3D renderler gibi süslü animasyonlarla sınırlamamız gerekir. Ancak Aşamalı Web Uygulamalarının çok daha fazlasını sunabileceğini biliyor muydunuz? Bugün, web ve kullanıcı arasındaki etkileşimlerin dokunsal tarafına bir göz atacağız.

(dev-)ormanda gürlemek

Yazıldığı gibi, tüm ortamlar yeni Titreşim-API için destek sağlamamaktadır. Spesifik olarak, her Chromium ve Firefox tarayıcısı kullanılabilirken, Safari/WebKit'in her çeşidinin desteği yoktur. Not: iOS'taki her tarayıcı, motoru olarak WebKit'i kullanır.

API'nin kendisinin kullanımı, aldığı kadar basittir. İşte bir örnek:

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

Bu kodun çalıştığını kanıtlamak için kod parçacığının sağ alt köşesindeki kopyala düğmesine dokunmanız yeterlidir. Cihazınız destekliyorsa, panoya kopyalama işlemini onaylamak için hafif bir titreşim başlatılmalıdır.

Neredeyse bitirdik, hadi API'nin son özelliklerine bir göz atalım:

const cancelVibration = () => {
  // Quick and easy: call 'vibrate' with
  // a val of 0 and the current vibration
  // is stopped.
  window.navigator?.vibrate?.(0);
}

Ve bununla ilgili! Kapsanacak çok şey yok, ancak doğru şekilde uygulandı, yani uygulamanızda çok fazla değil ve yalnızca uygulanabilir olduğunda, titreşim API'si gerçekten harika bir kullanım özelliğidir. En iyi kullanım durumunun, kullanıcının yaptığı önemli eylemleri dokunsal olarak onaylamak veya reddetmek olduğunu düşünüyorum, ör. bu durumda kod için kopyalama eylemi veya başka bir uygulamada kalıcı bir silme eylemi.

• Tom