PWA 진동 API

Brm, Brm!

"관능적 인"수준에서 사용자와 상호 작용하면 앱의 사용자 경험을 크게 향상시킬 수 있습니다. 일반적으로 개발자는 시차 효과 또는 3D 렌더링과 같은 멋진 애니메이션으로 제한하여 앱 내에서보다 사실적인 느낌을 전달해야합니다. 하지만 프로그레시브 웹 앱이 훨씬 더 많은 것을 제공 할 수 있다는 것을 알고 계셨습니까? 오늘 우리는 웹과 사용자 간의 상호 작용의 햅틱 측면을 살펴 보겠습니다.

(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