Инструменты, доступные для создания мощных приложений на веб-платформе, улучшаются с каждым годом. Спецификация HTML5 добавила ряд полезных функций в новые API, которые вы, возможно, еще не изучили, вероятно, из-за отсутствия поддержки браузера.
В этой статье мы рассмотрим 10 API-интерфейсов HTML5, которые охватывают целый ряд функций и возможностей, которые могут помочь вам создавать интерактивные веб-сайты, тестировать производительность вашего кода, взаимодействовать с устройством пользователя и многое другое.
И, как вы увидите, поддержка этих функций, вероятно, намного лучше, чем вы думаете.
1. API высокого разрешения
API времени с высоким разрешением предоставляет текущее время с разрешением менее миллисекунды и такое, что оно не подвержено перекосу системных часов или настройкам.
Он предоставляет только один метод, который принадлежит объекту window.performance , который window.performance now() . Он возвращает DOMHighResTimeStamp представляющий текущее время в миллисекундах. Отметка времени очень точна, с точностью до тысячной доли миллисекунды, что позволяет проводить точные тесты производительности нашего кода.
Наиболее важной особенностью этого метода является то, что performance.now() монотонно увеличивается (то есть постоянно увеличивается), поэтому разница между двумя вызовами никогда не будет отрицательной.
Браузерами, поддерживающими API, являются IE10, Opera 15 и Firefox 15+ без префикса. Chrome поддерживает этот API версии 20 с префиксом «webkit» и без префикса версии 24. Подробнее о совместимости здесь .
Базовый пример вызова этого метода показан ниже:
var time = performance.now();
Ниже приведена демонстрация для вас, чтобы поэкспериментировать с:
Чтобы узнать больше об этом API, вы можете прочитать одну из моих предыдущих статей, Обнаружение API высокого разрешения .
2. Пользовательский тайминг API
Еще одним API, созданным для тестирования производительности нашего кода, является User Timing API . С помощью API-интерфейса High Resolution Time мы можем получить текущее время с точностью до миллисекунды, но это оставляет нас с болью от введения множества переменных в нашем коде. User Timing API решает эту и другие проблемы.
Это позволяет нам точно измерять и сообщать о производительности раздела кода JavaScript. Он имеет дело с двумя основными понятиями: знак и мера. Первая представляет момент (метка времени), а вторая представляет время, прошедшее между двумя метками.
Этот API предоставляет четыре метода, все принадлежащие объекту window.performance , которые позволяют нам хранить и удалять метки и меры. Метод mark(name) используется для хранения метки времени с ассоциированным именем, а measure(name[, mark1[, mark2]]) может использоваться для хранения времени, прошедшего между двумя метками с предоставленным именем.
Настольные и мобильные браузеры, которые поддерживают API синхронизации пользователей, — это IE10 +, Chrome 25+ и Opera 15+.
Вот базовый пример использования этого API:
performance.mark("startFoo"); // A time consuming function foo(); performance.mark("endFoo"); performance.measure("durationFoo", "startFoo", "endFoo");
Вот демо:
Для получения дополнительной информации ознакомьтесь с моей статьей « Обнаружение API синхронизации пользователя» .
3. API синхронизации навигации
Время загрузки страницы является одним из наиболее важных аспектов взаимодействия с пользователем. К сожалению, устранение неполадок при медленной загрузке страницы нелегко, потому что есть много способствующих факторов. Чтобы помочь в этом, в дополнение к API, рассмотренным выше, W3C предложил API синхронизации навигации .
Этот API предлагает подробную информацию о времени в процессе загрузки страницы, доступную через свойство timing объекта window.performance . Подробно, он предоставляет измерения, связанные с перенаправлением страниц, поиском DNS, временем, потраченным на построение DOM, установлением соединения TCP и некоторыми другими показателями.
В настоящее время API синхронизации навигации поддерживается в IE9 +, Firefox 7+, Opera 15+ и Chrome 6+.
Для демонстрации этого API, смотрите эту страницу . Для получения дополнительной информации ознакомьтесь со статьей Колина Ирига « Профилирование загрузки страниц с помощью API синхронизации навигации» .
4. Сетевой информационный API
Как вы думаете, мы закончили с выступлениями? Ни за что! Производительность — одна из самых важных концепций, на которой нужно сосредоточиться сегодня. По словам программиста Google Chrome Эрика Сейдела, даже в 2014 году Google поставил производительность в качестве одной из главных целей .
Другим API, который имеет дело с производительностью, является API Информации о сети . Он помогает определить, подключен ли пользователь к измеренному соединению, такому как оплата по факту, и дает оценку пропускной способности. Благодаря этой информации можно изменить поведение наших страниц, чтобы наилучшим образом приспособить пользователя. Например, мы можем условно загружать изображения, видео, шрифты и другие ресурсы в зависимости от типа обнаруженного соединения.
Этот API принадлежит свойству connection объекта window.navigator . Он предоставляет два свойства только для чтения: bandwidth и metered . Первый представляет собой число, представляющее оценку текущей полосы пропускания, в то время как последний представляет собой логическое значение, значение которого равно true если подключение пользователя ограничено и использует пропускную способность, и false противном случае.
В настоящее время только Firefox 12+ и Chrome (только для мобильных устройств) предлагают экспериментальную поддержку с использованием соответствующего префикса поставщика.
Вы можете посмотреть демонстрацию этого API на странице csskarma . Для получения дополнительной информации см. Статью Крейга « Как использовать API информации о сети для улучшения отзывчивых сайтов» .
5. Вибрация API
Другой ключевой концепцией, которая привлекает большое внимание в нашей отрасли, является пользовательский интерфейс (UX). Одним из предложенных API-интерфейсов, который позволяет нам улучшить этот аспект наших веб-сайтов, является Vibration API .
Этот API предназначен для использования в случаях, когда требуется обратная связь на основе касания, и предоставляет возможность программно создавать вибрацию, взаимодействующую со встроенным компонентом вибрации мобильного устройства. Если такого компонента не существует, он ничего не делает.
Vibration API особенно полезен, если вы работаете с онлайн-видео или веб-играми. Например, вы можете позволить устройству пользователя вибрировать во время хода игры в ответ на конкретное событие.
Он предоставляет только один метод, vibrate() , который принадлежит объекту window.navigator . Этот метод принимает один параметр, указывающий продолжительность вибрации в миллисекундах. Параметр может быть целым числом или массивом целых чисел. Во втором случае это интерпретируется как переменные времена вибрации и паузы.
Этот API поддерживается в Chrome 30+, Firefox 11+ и Opera 17+.
Основное использование этого API показано ниже:
// Vibrate once for 2 seconds navigator.vibrate(2000);
Для демонстрации посетите эту страницу в поддерживающем устройстве. Чтобы узнать больше об этом API, взгляните на The Buzz About Vibration API и Как использовать HTML5 Vibration API .
6. Состояние аккумулятора API
Vibration API — не единственный, который обеспечивает доступ к оборудованию устройства. Другой API этого типа, разработанный для мобильных устройств, — это Battery Status API . Это позволяет вам проверять состояние батареи устройства и генерирует события об изменениях уровня или состояния батареи.
API состояния батареи предоставляет четыре свойства ( charging , chargingTime , discharingTime и level ) и четыре события. Свойства указывают, заряжается ли батарея, секунды, оставшиеся до полной зарядки батареи, секунды, оставшиеся до полной разрядки батареи, и текущий уровень заряда батареи. Эти свойства принадлежат свойству battery объекта window.navigator .
Варианты использования этого API действительно интересны. Например, если мы обнаружим, что батарея разряжена, мы можем замедлить или остановить запросы Ajax, которые могут автоматически появляться на странице через определенные промежутки времени. Другим примером является отключение некритических анимаций CSS3 и JavaScript или более частое сохранение данных, чтобы предотвратить потерю данных, когда батарея достигает критического уровня.
В настоящее время только API для настольных компьютеров и мобильных устройств Firefox поддерживают этот API.
Базовый пример получения текущего уровня заряда батареи в процентах показан ниже:
// Retrieves the percentage of the current level of the device's battery var percentageLevel = navigator.battery.level * 100;
Опять же, вот демо, которое будет работать только на поддерживающем устройстве:
Для получения дополнительной информации см. Представление API состояния батареи и Как использовать API состояния батареи HTML5
7. API видимости страницы
API видимости страницы позволяет нам определять текущее состояние видимости страницы. Это означает, что мы можем определить, находится ли наша страница в фоновом режиме или свернута (т. Е. Это не текущее окно).
Эта возможность может помочь нам в разработке мощных, но в то же время процессорных и ресурсоемких веб-приложений Фактически, мы можем замедлить или даже остановить процесс, потребляющий ресурсы процессора и / или полосы пропускания, если обнаружим, что пользователь не использует страницу.
Этот API предоставляет одно событие, называемое visibilitychange , которое мы можем прослушивать для обнаружения изменений в состоянии видимости страницы, и два свойства только для чтения: hidden и visibilityState . Эти свойства принадлежат объекту document . hidden — это логическое значение, значение которого равно true если страница не видна, и false противном случае. visibilityState — это перечисление, которое указывает текущее состояние документа и состоит из следующих значений: hidden , visible , prerender visible и unloaded .
Браузерами настольных компьютеров, поддерживающими этот API, являются Chrome 13+, Internet Explorer 10, Firefox 10+, Safari 7 и Opera 12.10 ( источник ). Мобильными браузерами, поддерживающими API, являются Chrome на Android 4.0+ и Opera Mobile 12.1+ на Android и Symbian ( источник ).
Ниже приведена демонстрация:
Подробнее об этом API см. Мою статью Введение в API видимости страницы .
8. Полноэкранный API
Полноэкранный API предоставляет способ запрашивать у пользователя полноэкранное отображение и по желанию выходить из этого режима.
Этот API предоставляет два метода, requestFullscreen() и exitFullscreen() , что позволяет нам запрашивать элемент для exitFullscreen() в полноэкранный режим и выхода из полноэкранного режима.
Он также предоставляет два свойства, fullScreenElement и fullScreenEnabled , принадлежащие объекту document . Они указывают элемент, который был переведен в полноэкранный режим и если полноэкранный режим в настоящее время включен. Он также предоставляет одно событие fullScreenEnabled , которое предоставляет нам удобный способ прослушивания, когда полноэкранный режим включен или отключен.
Полноэкранный API поддерживается всеми основными браузерами, в частности: Internet Explorer 11+, Firefox 10+, Chrome 15+, Safari 5.1+ и Opera 12.10+ ( источник ).
Для демонстрации этого API, смотрите эту страницу . Для получения дополнительной информации ознакомьтесь со статьей Крейга « Как использовать полноэкранный API-интерфейс HTML5 (снова)» , из которой взята демоверсия.
9. API getUserMedia
API getUserMedia обеспечивает доступ к мультимедийным потокам (видео, аудио или обоим) с локальных устройств. Это означает, что мы можем получить доступ к этим потокам без использования Flash или Silverlight. Некоторые варианты использования этого API включают общение в режиме реального времени и учебные пособия или запись уроков.
API getUserMedia предоставляет только один метод с именем getUserMedia() . Он принадлежит объекту window.navigator и принимает в качестве своих параметров объект ограничений, обратный вызов успеха и обратный вызов сбоя.
API getUserMedia также позволяет нам много контролировать запрошенный поток. Например, мы можем выбрать источник видео в высоком или низком разрешении.
Настольные браузеры, поддерживающие этот API, — это Chrome 21+ (с префиксом -webkit), Firefox 17+ (с префиксом -moz) и Opera 18+. На мобильных устройствах это поддерживается в Chrome 32+, Firefox 26+ и Opera 12+ ( источник ).
Чтобы увидеть демо, посетите эту страницу в браузере поддержки. Для получения дополнительной информации см. Мою статью Введение в API getUserMedia .
10. WebSocket API
API WebSocket позволяет разработчикам создавать приложения в реальном времени, устанавливая сокет-соединения между браузером и сервером. Это означает, что мы можем установить постоянное соединение между клиентом и сервером, которое может обмениваться данными в любое время.
Для связи по протоколу WebSocket вам необходимо создать объект WebSocket . Как только объект создается, API пытается установить соединение.
API WebSocket предоставляет два метода: send() для отправки данных на сервер и close() для закрытия соединения. Он также предоставляет несколько атрибутов, некоторые из которых являются слушателями событий. Это означает, что мы можем назначить им функцию, которая выполняется при возникновении события. Примеры событий включают возникновение ошибки или сообщение, поступающее с сервера.
API WebSocket поддерживается всеми основными браузерами, в частности IE10 +, Firefox 4+ (полная поддержка с версии 6), Chrome 4+ (полная поддержка с версии 14), Safari 5+ (полная поддержка с версии 6) и Opera 11+ (полная поддержка с версии 12.10), ( источник ).
Подробнее об этом API можно прочитать в статье Сандип Панды « Введение в API WebSockets HTML5» .
Вывод
В этой статье я дал обзор, а также несколько демонстраций многих API, представленных в HTML5 в последние годы. Как видите, многие из них имеют довольно приличную поддержку браузера.
Я надеюсь, что это краткое изложение, а также сопровождающие источники и демонстрации могут дать вам какой-то стимул создать что-то классное с помощью этих новых функций.
Если вы использовали какой-либо из них, сообщите нам о своем опыте в комментариях.