В настоящее время мы привыкли получать тактильную обратную связь, когда получаем текстовое сообщение или когда играем в игру на своем телефоне.
До сих пор у нативных приложений было то преимущество, что они предоставляли пользователям глубокие возможности, имея возможность тесно взаимодействовать с оборудованием хостинга.
Однако благодаря Vibration API мы можем обогатить наши веб-приложения новой функциональностью и позволить устройству вибрировать через наш браузер!
Это еще один шаг к сокращению функционального разрыва с нативными приложениями.
Vibration API просто ничего не сделает, если хост-устройство его не поддерживает.
Это соответствует стратегии прогрессивного улучшения. То есть, если у пользователя современный браузер и устройство, способное вибрировать, мы можем предложить более богатый опыт. С другой стороны, наше веб-приложение должно корректно работать для всех других пользователей даже без расширенных функций.
Синтаксис API
Мы используем navigator.vibrate для определения шаблона, состоящего из одной вибрации или последовательности вибраций и пауз. Метод принимает в качестве параметра целое число или массив целых чисел, выражающих длительность в миллисекундах вибрации или последовательности вибраций и пауз соответственно. Тип возвращаемого значения — boolean: false в случае передачи неверных параметров, true в противном случае.
Как упоминалось ранее, если устройство не поддерживает вибрацию, этот метод не будет иметь никакого эффекта.
var success = window.navigator.vibrate(pattern);шаблон
Предоставляет образец интервалов вибрации и паузы. Каждое значение указывает количество миллисекунд для вибрации или паузы попеременно. Вы можете указать либо одно значение (чтобы вибрировать один раз в течение указанного количества миллисекунд), либо массив значений для попеременной вибрации, паузы и повторной вибрации. (Источник: MDN Web)
Метод возвращает логическое значение, если мы передаем неправильные параметры.
Чтобы сгенерировать одиночную вибрацию продолжительностью 300 мс, мы можем использовать следующий код:
window.navigator.vibrate(300);В то время как для создания шаблона, состоящего из вибрации 300 мс, паузы 100 мс, вибрации 300 мс:
window.navigator.vibrate([300, 100, 300]);Отменить беговую вибрацию
Текущую вибрацию можно прервать в любой момент, передав методу navigator.vibrate() значение 0 или пустой массив. заменить старый, бегущий образец.
Подпишитесь на меня в Твиттере, если хотите узнавать о новых статьях или будущих обновлениях.
Случаи применения
Мы можем придумать разные сценарии, в которых этот API может пригодиться. Вероятно, самый интуитивно понятный — для веб-игр, где мы можем обеспечить дополнительную степень вовлеченности пользователей.
Это может быть полезно также для веб-викторин, чтобы подчеркнуть неправильный ответ или дать тактильную обратную связь об ошибках при заполнении формы. Последний случай может быть особенно полезен при работе с длинными формами на мобильных устройствах, поскольку отображаемая клавиатура может закрывать некоторые сообщения об ошибках или недопустимые поля формы.
Поддержка браузера
API хорошо поддерживается большинством (современных) браузеров, за исключением IE и Safari.
Конечно, целевое устройство также должно иметь аппаратное обеспечение вибрации, чтобы работать правильно!
Демо
Вы можете протестировать API на своем телефоне с помощью следующей живой DEMO.
Здесь Github REPO с исходным кодом демо.
Вывод
Vibration API — еще одна интересная возможность обогатить наши веб-проекты и предложить нашим пользователям улучшенный опыт, который до сих пор был зарезервирован только для собственных приложений.
Первоначально опубликовано на https://dev.to 16 декабря 2020 г.
