HTML5 был глотком свежего воздуха для сети, которая не только повлияла на сеть, насколько мы ее знаем. HTML5 предоставляет ряд API-интерфейсов, которые позволяют разработчикам создавать интерактивные веб-сайты и улучшать работу пользователей на мобильных устройствах. В этой статье мы подробнее рассмотрим Vibration API.
Вы помните, когда PlayStation была впервые представлена в девяностых? Если вы это сделаете, то вы также можете вспомнить, что небольшая революция была создана с введением DualShock , контроллера, который представил обратную связь посредством вибрации. Это был огромный успех.
Все мои друзья с консолью PlayStation почти сразу переключились на DualShock, и я не стал исключением. Почему это было так успешно? Ключевым фактором его успеха была его способность обеспечивать обратную связь с игроком в форме вибрации, это заставляло вас чувствовать себя более связанным с игрой, как если бы вы были в игре.
DualShock был только началом этой тенденции. Контроллеры стали намного более продвинутыми с Kinect и революционными продуктами, такими как Oculus Rift и невероятно популярный Omni .
Сеть стала намного мощнее, и в результате разработка игр перешла в сеть. Еще несколько лет назад для веб-игр использовались Flash и Silverlight. Однако сегодня эти технологии больше не нужны для разработки игр для Интернета, и это в значительной степени связано с HTML5.
С увеличением мощности возрастает ответственность. Для Интернета это означает необходимость в четко определенных API-интерфейсах, которые помогают улучшить взаимодействие с пользователем, и возможность использовать преимущества новых технологий, доступных, например, на мобильных устройствах. Одним из таких API является Vibration API.
1. Что такое API вибрации?
Vibration API был разработан для использования в тех случаях, когда тактильная обратная связь необходима или желательна. Практически каждое современное мобильное устройство обладает способностью вибрировать. Vibration API предлагает возможность программного доступа к вибрационным возможностям устройства и работы с ними. API не предназначен для использования в качестве общего механизма уведомлений, поскольку API веб-уведомлений был создан именно для этой цели. Несмотря на то, что на данный момент Vibration API является Рекомендацией кандидата W3C, спецификации не менялись в течение нескольких месяцев, что свидетельствует о том, что в скором времени эта спецификация выйдет на финальную стадию, Рекомендацию W3C.
Как и в случае с собственными мобильными приложениями, возможности Vibration API безграничны. Вы можете использовать его во время воспроизведения видео, чтобы устройство вибрировало при взрывах. Игры — это еще одна отличная возможность для Vibration API. Игры уже широко используют аппаратные возможности мобильных устройств, поэтому Vibration API отлично подходит для веб-игр. Просто вспомните, почему DualShock стал таким популярным, и вы поймете, о чем я.
2. Реализация
Теперь, когда мы знаем, что Vibration API может сделать для нас, давайте посмотрим, как мы можем его использовать. Позвольте мне начать с хороших новостей, API очень прост в использовании — почти тривиально. Есть только один метод, о котором вам нужно знать, vibrate . Вот и все. Метод vibrate принадлежит navigator window . Метод vibrate принимает один параметр, который может быть целым числом или массивом целых чисел.
Если в метод vibrate передается одно целое число, устройство вибрирует в течение целого числа в миллисекундах. Если вы передаете массив чисел, шаблон вибрации определен. Целые числа с нечетными индексами говорят устройству, как долго вибрировать, в то время как целые числа добавляют четные индексы, указывающие, как долго должны быть паузы между вибрациями. Чтобы остановить vibrate устройства, вы можете передать 0 для vibrate или вызвать метод без каких-либо параметров.
Изображение стоит тысячи слов, но для разработчиков фрагмент кода, вероятно, стоит миллиард слов. Давайте рассмотрим несколько примеров.
Шаг 1: Обнаружение поддержки
Чтобы определить, поддерживает ли браузер устройства API вибрации, вы можете выполнить простую проверку, как показано ниже.
|
1
2
3
4
5
|
if (window.navigator && window.navigator.vibrate) {
// Shake that device!
} else {
// Not supported
}
|
Другой вариант — осмотреть объект navigator .
|
1
2
3
4
5
|
if (‘vibrate’ in navigator) {
// Shake that device!
} else {
// Not supported
}
|
Шаг 2: вибрировать один раз
Чтобы заставить устройство вибрировать, мы вызываем метод vibrate и передаем ему целое число. Например, чтобы настроить устройство на вибрацию в течение одной секунды, мы сделаем следующее:
|
1
2
|
// Vibrate once for 1 second
navigator.vibrate(1000);
|
Шаг 3: вибрировать несколько раз
Чтобы заставить устройство вибрировать несколько раз с паузой между каждой вибрацией, мы передаем массив целых чисел методу vibrate . Если мы хотим, чтобы устройство вибрировало дважды с паузой в полсекунды и заканчивало вибрацией в две секунды, мы бы сделали следующее:
|
1
2
3
4
5
|
// Vibrate three times
// First two vibrations last one second
// Last vibration lasts two seconds
// Pauses are half a second
navigator.vibrate([1000, 500, 1000, 500, 2000]);
|
Шаг 4: закончить вибрацию
Чтобы остановить vibrate устройства, мы передаем метод vibrate 0 или пустой массив.
|
1
2
|
// Stop vibrating
navigator.vibrate(0);
|
Или:
|
1
2
|
// Stop vibrating
navigator.vibrate([]);
|
Поддержка браузера
Поддержка Vibration API довольно хороша в настольных и мобильных браузерах. Основными браузерами, которые в настоящее время не поддерживают API, являются Internet Explorer и Safari. Взгляните на эту сводку, чтобы понять, какие браузеры поддерживают API.
- Firefox 11+: до версии 15 вам нужно использовать префикс
-moz. - Opera 17+: чтобы использовать его в версиях до 19, необходимо активировать флаг «Функции экспериментальной веб-платформы».
- Chrome 30+: чтобы использовать его в версиях до 32, необходимо активировать флаг «Функции экспериментальной веб-платформы».
Реального полифилла для Vibration API не существует. Тем не менее, существует полифилл, предназначенный для Firefox OS. Он был создан Кристианом Хайльманном и называется mozVibrate-polyfill . Вы можете найти его на GitHub .
демонстрация
Я хотел бы закончить этот урок простой демонстрацией Vibration API. Это простая страница HTML5, которая содержит три кнопки: одну для вибрации один раз, одну для повторного вибрации и кнопку для прекращения вибрации. Демонстрация определяет, поддерживает ли браузер API. Если это не так, вы увидите сообщение «API не поддерживается» и кнопки отключены. Я рекомендую протестировать демо на мобильном устройстве.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<!DOCTYPE html>
<html>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>
<meta name=»author» content=»Aurelio De Rosa»>
<title>Vibration API Demo by Aurelio De Rosa</title>
<style>
body
{
max-width: 500px;
margin: 2em auto;
font-size: 20px;
}
h1
{
text-align: center;
}
.hidden
{
display: none;
}
.buttons-wrapper
{
text-align: center;
}
.button-demo
{
padding: 0.5em;
margin: 1em auto;
}
.author
{
display: block;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Vibration API</h1>
<div class=»buttons-wrapper»>
<button id=»button-play-v-once» class=»button-demo»>Vibrate Once</button>
<button id=»button-play-v-thrice» class=»button-demo»>Vibrate Thrice</button>
<button id=»button-stop-v» class=»button-demo»>Stop</button>
</div>
<span id=»v-unsupported» class=»hidden»>API not supported
<small class=»author»>
Demo created by <a href=»http://www.audero.it»>Aurelio De Rosa</a>
(<a href=»https://twitter.com/AurelioDeRosa»>@AurelioDeRosa</a>)
</small>
<script>
window.navigator = window.navigator ||
if (navigator.vibrate === undefined) {
document.getElementById(‘v-unsupported’).classList.remove(‘hidden’);
[‘button-play-v-once’, ‘button-play-v-thrice’, ‘button-stop-v’].forEach(function(elementId) {
document.getElementById(elementId).setAttribute(‘disabled’, ‘disabled’);
});
} else {
document.getElementById(‘button-play-v-once’).addEventListener(‘click’, function() {
navigator.vibrate(1000);
});
document.getElementById(‘button-play-v-thrice’).addEventListener(‘click’, function() {
navigator.vibrate([1000, 500, 1000, 500, 2000]);
});
document.getElementById(‘button-stop-v’).addEventListener(‘click’, function() {
navigator.vibrate(0);
});
}
</script>
</body>
</html>
|
Вывод
В этой статье мы узнали о Vibration API, что это такое, как его использовать и когда его использовать. Как мы видели ранее, API очень прост в использовании и предоставляет нам элегантный способ улучшить пользовательский опыт на мобильных устройствах, особенно для таких вещей, как фильмы и игры. Vibration API поддерживается довольно хорошо в настольных и мобильных браузерах, поэтому ничто не мешает вам использовать его сегодня.