[JavaScript] navigator.vibrate로 모바일 웹뷰 진동 기능 추가하기

 

요즘 대부분의 모바일 기기는 vibration 하드웨어를 포함하고 있습니다.
Android, IOS로 만든 서비스들을 보면 진동 기능이 거의 필수이지만 일반적인 웹 같은 경우에는 데스크톱을 사용하기 때문에 진동 기능을 잘 사용하지 않습니다. 하지만 모바일 웹뷰의 경우에는 진동 기능이 필요한 경우가 많으며 해당 기술을 vibration API를 통해 구현이 가능합니다.

참고로 IOS 모바일 기기(또는 사파리 등등)에서는 해당 API를 지원하지 않기 때문에 진동 기능이 동작하지 않습니다.

/**
 * 진동 함수
 * @param {Number} ms millisecond
 */
const vibration = (ms = 10) => {
  navigator.vibrate =
    navigator.vibrate ||
    navigator.webkitVibrate ||
    navigator.mozVibrate ||
    navigator.msVibrate;
  if (navigator.vibrate) navigator.vibrate(ms);
};

 

 

📚 참고

https://shapeshed.com/html5-vibrate-api/
https://developer.mozilla.org/ko/docs/Web/API/Vibration_API