Смартфоны и мобильные устройства приобрели большое значение в нашей жизни, и все чаще кажется, что мы не можем жить без них.
При правильном использовании и умеренности они являются ценными инструментами, которые могут помочь нам в решении общих задач, таких как знание следующего автобуса, поиск ближайшей станции метро, поиск итальянского ресторана и так далее.
Они также открыли новый мир для веб-разработчиков. Фактически, благодаря росту потребностей, связанных с использованием мобильных устройств, набор новых API, специально созданных для них, был стандартизирован.
В последние месяцы я познакомил вас с несколькими API, такими как API веб-уведомлений и API веб-речи . В этой статье я опишу простой, но полезный API, который называется Proximity API.
Вступление
Proximity API определяет события, которые предоставляют информацию о расстоянии между устройством и объектом, которое измеряется датчиком приближения. Этот API изначально был частью Sensor API, позже разделился и стал независимым API. Спецификации Proximity API считаются стабильными, поскольку он достиг статуса Рекомендации кандидата W3C с 1 октября 2013 года.
Если вы когда-либо имели или использовали смартфон, который, как я полагаю, у вас есть, вы уже видели этот API в действии.
Хотите пример? Подумайте о своем последнем звонке и о том, что вы сделали. Вы разблокировали свой смартфон, набрали номер, по которому хотите позвонить, а затем нажали кнопку «Позвонить». Сделав это, вы поднесли смартфон к уху, и вдруг что-то волшебное произошло, экран выключился.
Это действие, которое многие смартфоны выполняют, чтобы обезопасить батарею, но этой функцией был API-интерфейс Proximity. Когда вы подносите мобильное устройство достаточно близко к уху, датчик приближения запускает событие, которое прослушивается вашим смартфоном, что в свою очередь отключает экран.
В Интернете у нас есть другие интересные варианты использования. Вы когда-нибудь ехали за рулем, слушая музыку через веб-сервис, и вам пришлось ее остановить?
Насколько больно было взять ваше устройство и затем вручную остановить плеер? Я думаю, что ответ «много!». Благодаря этому API веб-разработчики теперь могут добавлять функцию, так что если объект (в данном случае это рука) находится близко к устройству, проигрыватель сделает паузу.
Теперь, когда мы знаем, что такое API Proximity и его варианты использования, мы можем погрузиться в события, которые он предоставляет.
События
Proximity API определяет два события, которые мы можем прослушивать и реагировать на них в зависимости от близости объекта. Первое событие — устройство deviceproximity и предоставляет информацию о расстоянии между deviceproximity устройством и соседним объектом. Второе событие — пользовательская userproximity и указывает, userproximity ли устройство соседний объект. Обе стреляют по объекту window , поэтому для их прослушивания мы прикрепляем к нему обработчик.
Пример того, как прикрепить обработчик для события deviceproximity ниже:
window.addEventListener('deviceproximity', function(event) { console.log('An object is ' + event.value + ' centimeters far away'); });
Присоединенный обработчик получает объект в качестве первого параметра, содержащего необходимую нам информацию. Объект, переданный событием deviceproximity предлагает три свойства: value , min и max . value — это число, обозначающее близость устройства к объекту в сантиметрах. Свойства min и max описывают минимальное и максимальное расстояние, которое датчик может обнаружить, в сантиметрах. Объект, переданный событием userproximity предоставляет свойство near . Это логическое значение, которое указывает, достаточно ли близок объект к устройству ( true ) или нет ( false ). В этом случае достаточно близко означает, что объект находится в пределах обнаруживаемого диапазона для конкретного устройства.
В восторге от этого API? Не так быстро…
Совместимость браузера
Поддержка Proximity API в настоящее время очень низкая. Единственный браузер, который поддерживает его, это Firefox, как на настольном, так и на мобильном, начиная с версии 15 . Это странно, учитывая, что он уже достиг статуса Рекомендации кандидата W3C, но это то, что мы имеем на данный момент.
Поскольку этот API был реализован только в Firefox, крайне важно знать, как проверить его поддержку. Мы можем сделать это, используя хорошо известный метод, с которым вы могли столкнуться при работе с другими API. Этот метод показан ниже:
if ('ondeviceproximity' in window) { // API supported. Don't get too close, I can feel you } else { // API not supported }
Как показано выше, мы можем протестировать поддержку события userproximity . На данный момент мы знаем, что такое Proximity API и какие события он предоставляет. Чтобы завершить наше путешествие, мы разработаем простую демонстрацию, чтобы увидеть его в действии.
демонстрация
Демонстрация, которую мы deviceproximity в этом разделе, присоединяет обработчик к deviceproximity и userproximity и показывает значение, возвращаемое на экране. Чтобы показать значения, мы будем использовать неупорядоченный список. Кроме того, мы разместим два span в начале страницы, чтобы указать, не поддерживается ли данное событие. По умолчанию они скрыты, но если браузер не поддерживает событие, они будут показаны.
Код JavaScript также прост. Сначала мы проверяем браузер, чтобы убедиться, что он поддерживает Proximity API. Поскольку последний состоит из двух независимых событий, мы будем тестировать их по одному за раз. Если данное событие не поддерживается, мы показываем соответствующее сообщение пользователю, используя связанный , В противном случае мы присоединяем обработчик, чтобы мы могли извлечь и затем показать возвращаемые значения.
Исходный код демонстрации приведен ниже, но вы также можете поиграть с живой демонстрацией . Этот API является частью моего репозитория демонстраций API HTML5 , коллекции демонстраций, которая позволяет вам играть с десятками API, представленных в HTML5 и связанных технологиях.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="author" content> <title>Proximity API Demo by Aurelio De Rosa</title> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { max-width: 500px; margin: 2em auto; padding: 0 0.5em; font-size: 20px; } h1 { text-align: center; } .api-support { display: block; } .hidden { display: none; } .value { font-weight: bold; } .author { display: block; margin-top: 1em; } </style> </head> <body> <h1>Proximity API</h1> <span id="dp-unsupported" class="api-support hidden">deviceproximity event not supported</span> <span id="up-unsupported" class="api-support hidden">userproximity event not supported</span> <ul> <li> An object is at a distance of <span id="dp-value" class="value">null</span> centimeters (within a detectable range of <span id="dp-min" class="value">null</span> - <span id="dp-max" class="value">null</span> centimeters). </li> <li> Object close to the device? <span id="up-value" class="value">unavailable</span> </li> </ul> <small class="author"> Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a> (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>).<br /> This demo is part of the <a href="https://github.com/AurelioDeRosa/HTML5-API-demos">HTML5 API demos repository</a>. </small> <script> if (!('ondeviceproximity' in window)) { document.getElementById('dp-unsupported').classList.remove('hidden'); } else { var proximityValue = document.getElementById('dp-value'); var proximityMax = document.getElementById('dp-max'); var proximityMin = document.getElementById('dp-min'); window.addEventListener('deviceproximity', function(event) { proximityValue.innerHTML = event.value; proximityMax.innerHTML = event.max; proximityMin.innerHTML = event.min; }); } if (!('onuserproximity' in window)) { document.getElementById('up-unsupported').classList.remove('hidden'); } else { var inProximity = document.getElementById('up-value'); window.addEventListener('userproximity', function(event) { inProximity.innerHTML = event.near; }); } </script> </body> </html>
Выводы
В этой статье я познакомил вас с Proximity API. Мы видели, что делает этот API и его варианты использования. Мы обсудили предоставленные события и то, как мы можем использовать их для адаптации поведения веб-приложения на основе присутствия объекта рядом с устройством. К сожалению, этот API поддерживается только Firefox, поэтому, возможно, еще не время его использовать.
Что вы думаете об этом API? Считаете ли вы это полезным? Будете ли вы использовать его в своем следующем проекте?