Статьи

Как использовать HTML5 Vibration API

Октябрь 1, 2018

Пользователи все чаще используют смартфоны и планшеты для доступа в Интернет. По состоянию на декабрь 2013 года каждое пятое посещение веб-сайта происходит с мобильного устройства. Если ваш веб-сайт или приложение поддерживают мобильные устройства, эта цифра может быть намного выше.

Разработка для нескольких устройств имеет свои проблемы, но есть также возможности, которые обычно недоступны на настольных ПК. Рассмотрим механизм вибрации; Это простое устройство тактильной обратной связи, которое может предупреждать вас о новых сообщениях или телефонных звонках. Это особенно полезно в шумной обстановке, где звук не слышен, или в тихих местах, где это отвлекает.

Разве не было бы здорово, если бы вы могли использовать вибрацию в своем приложении?…

  • Направления ходьбы можно указать, используя одну вибрацию для левой стороны, две для правой.
  • Телефон может вибрировать определенным образом, когда происходит событие, или вы находитесь рядом с кем-то.
  • Вы можете отправлять секретные сообщения в азбуке Морзе!
  • Игра может быть усилена вибрацией при падении или попадании ракеты.

Это именно то, что позволяет делать HTML5 Vibration API !

Вибрировать или не вибрировать?

Просто потому, что мы можем вибрировать телефон, это не значит, что мы должны. Вибрация — это огромная разрядка батареи, поэтому ее лучше всего отключить, если заканчивается заряд батареи или игра не активна на текущей вкладке . В зависимости от вашего приложения, может быть лучше предоставить пользователю опцию, чтобы они могли включать, отключать или настраивать критерии вибрации.

Поддержка и обнаружение браузера

API является относительно новым, и поддержка в настоящее время ограничена последними версиями Firefox и Chrome. Более ранние выпуски требуют префиксов moz и webkit соответственно. Вам также следует использовать устройство с вибрационным механизмом — API может быть доступен в вашем браузере, но вы не узнаете, как оно работает без него!

Используйте следующую проверку для определения вибрационной поддержки: 

if ("vibrate" in navigator) {
	// vibration API supported
}

Чтобы проверить и использовать префиксные версии, вы можете использовать такой код: 

 // enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
	// vibration API supported
}

Основы вибрации

Базовая вибрация может быть настроена путем передачи количества миллисекунд в navigator.vibrate 

 // vibrate for one second
navigator.vibrate(1000);

Кроме того, вы можете передать массив с параметрами вибрации и задержки, указанными в миллисекундах. Например, чтобы вибрировать в течение 500 мс, подождите 300 мс, а затем снова вибрировать в течение 100 мс: 

 // vibrate for one second
navigator.vibrate([500, 300, 100]);

Элементы массива с четными номерами определяют время вибрации (массивы начинаются с нуля, поэтому первый и третий элементы равны 0 и 2). Элементы нечетного массива определяют время задержки.

Вибрация не блокирует; Ваш код JavaScript будет продолжать работать, пока устройство вибрирует. Чтобы остановить это, вы можете передать ноль в navigator.vibrate

Эта концепция может быть полезна в играх. Например, когда пользователь разбивает свою машину, вы устанавливаете navigator.vibrate(10000) Однако, если эффект сбоя заканчивается до истечения 10 секунд, вы устанавливаете navigator.vibrate(0)

Вибрационная демонстрация

Чтобы проверить API в вашем устройстве …

Посмотреть демонстрацию Vibration API …

Просмотр исходного кода для всех HTML, CSS и JavaScript. Параметры формы формируют массив, который передается в navigator.vibrate Когда нажата кнопка СТОП, navigator.vibrate(0); выполнен.

Удачи с Vibration API и дайте мне знать, если у вас есть интересные применения

36
Share: