[Перевод] Как разобраться в API HTML?03.11.2020 16:47

Автор статьи, перевод которой мы сегодня публикуем, решил разобрать несколько HTML5-API и поговорить об их возможностях, о том, для чего они созданы, об особенностях их использования и об их ограничениях.

Что такое API?

Сокращение API расшифровывается как Application Programming Interface, что обычно переводится как «программный интерфейс приложения» или «интерфейс прикладного программирования». API широко используются в программировании для организации взаимодействия серверных приложений. API позволяют двум сервисам взаимодействовать друг с другом, не зная при этом о деталях реализации друг друга. API — это важнейший аспект проектирования систем, имеющий отношение к абстракции, к одной из фундаментальных концепций информатики.

API HTML5

Существует точка зрения, в соответствии с которой HTML5, язык разметки, не имеет программных интерфейсов. А «API HTML» — это, на самом деле, JavaScript-API, выдающие ответы, представленные в формате HTML. Это так из-за того, что API обычно создают для организации взаимодействия серверных программ.

Это заблуждение можно связать с тем фактом, что спецификация HTML5, определённая W3C, в основном, касается семантических элементов HTML. Большинство рассмотренных возможностей API HTML воспринимаются как продвинутые способы работы с HTML, а не как интерфейсы прикладного программирования. Спецификации API HTML5 можно найти в документации WHATWG (Web Hypertext Application Technology Working Group).

Если почитать документацию WHATWG, то можно заметить, что JavaScript там практически не упоминается, и что для понимания API HTML5 не нужно знать JavaScript.

Вот что об этом пишет Леа Веру в материале об API HTML: «В API HTML определения и протоколы находятся в самом HTML. Инструменты обращаются к HTML за конфигурационными сведениями. API HTML обычно представлены определёнными наборами классов и атрибутов, которые можно использовать в обычном HTML-коде».

Фронтенд-разработчики обычно бегло знакомятся с API HTML прежде чем создавать UI-библиотеки, заменяющие их возможности. Здесь мы поговорим о некоторых API HTML.

API Geolocation

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

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

API Geolocation HTML5 даёт более точную информацию о местоположении пользователя в том случае, если на устройстве пользователя (на мобильном, например), включён GPS и доступны другие средства для определения местоположения. Сведения о местоположении пользователя поступают в приложение в виде географических координат, представленных широтой и долготой. При работе с API Geolocation используются методы, наподобие getCurrentPosition(), возвращающие сведения о текущем местоположении пользователя. Подобные механизмы используются и для вывода сведений о пользователе на электронной карте, вроде той, что имеется в Google Maps. Метод watchPosition() возвращает сведения о текущем местоположении пользователя и обновляет сведения при перемещении пользователя. Это — весьма полезный метод, так как он являет собой пример динамических возможностей рассматриваемого API, давая программисту большую гибкость. Метод clearWatch() останавливает наблюдение за перемещениями пользователя, инициированное методом watchPosition(). Например, возможен сценарий, когда наблюдение за местоположением пользователя останавливается после того, как он, построив с помощью программы маршрут и руководствуясь в пути её указаниями, достиг пункта назначения.

Если говорить об ограничениях API Geolocation, то можно отметить следующие:

Оно работает лишь на защищённых сайтах, то есть на тех, где используется протокол HTTPS.
Оно не будет работать на старых телефонах или в устаревших браузерах.
Свежие данные о местоположении пользователя перестают поступать в приложение после того, как окно браузера будет минимизировано, или после того, как браузер будет переведён в фоновый режим работы.
Информация, получаемая приложением, её точность и частота обновления, зависят от соответствующих системных сервисов и от того, какие именно методы используются для получения сведений о местоположении пользователя.

API Drag and Drop

Перетаскивание объектов (Drag and Drop, DnD), это простая процедура, позволяющая пользователю перемещать элементы из одного места экрана программы в другое. В данном случае речь идёт о включении возможности перетаскивания элементов. Функционал этого API позволяет программистам создавать простые онлайн-игры, вроде шахмат, где можно перетаскивать по доске шахматные фигуры. Процесс перетаскивания элементов по экрану устроен довольно просто:

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

HTML5-реализация DnD впервые появилась, благодаря усилиям Microsoft, в IE5.0. Позже эта технология была реализована и в других браузерах. Здесь используется модель событий DOM и соответствующие события.

Для того чтобы элемент можно было бы перетаскивать, его атрибут draggable должен быть установлен в true:

Далее, настраивают обработчики событий наподобие ondragstart, ondragover и ondrop. Первый срабатывает в начале процесса перетаскивания. Второй — в момент, когда перетаскиваемый объект находится над целевым элементом. Третий — в конце процесса перетаскивания элемента.

Если реализовывать DnD-механизмы с использованием API HTML5, можно ожидать полной поддержки этих механизмах в специфических окружениях, а так же минимизации разного рода неожиданностей, которые могут возникнуть в процессе перетаскивания элементов. Одним из ограничений данного API можно назвать тот факт, что он не даёт возможностей управлять происходящим в процессе перетаскивания элемента.

API Web Storage

Появление API Web Storage сыграло очень важную роль в веб-разработке, так как эти API позволяют веб-приложениям сохранять различные данные в хранилище браузера. Локальное хранение данных и возможность организации доступа к ним без необходимости предварительной передачи этих данных по сети открывают для приложения массу ценных возможностей. До появления API Web Storage HTML5 разработчики не могли хранить локально значительные объёмы информации. Данные пользователя приходилось сохранять в куки-файлах. А ведь эти файлы ориентированы на организацию взаимодействия с сервером и их нужно передавать на сервер в каждом HTTP-запросе.

API Web Storage предлагают разработчикам возможность хранения на клиенте значительных объёмов информации, которая изменяется сравнительно редко, и передача которой по сети означает необходимость неоправданной траты времени и системных ресурсов. У API Web Storage есть и другие преимущества перед куки-файлами, например — это возможность хранения больших объёмов информации, это улучшения в сфере безопасности. В результате API Web Storage нашёл применение во многих сценариях.

API Web Storage предлагает разработчику два уникальных механизма, направленных на решение различных задач. Это — локальное хранилище (local storage) и сессионное хранилище (session storage).

В локальном хранилище данные хранятся долговременно. Например, пользовательские данные из него не удаляются даже после закрытия и открытия страницы или после обновления страницы. Удаление данных из такого хранилища выполняется явным образом. Для работы с этим хранилищем используется объект localStorage.

В сессионном хранилище, с другой стороны, данные хранятся временно. Они удаляются в том случае, если браузер закрывают, или если обновляют страницу. Для работы с сессионным хранилищем применяется объект sessionStorage.

API Web Speech

API Web Speech состоит из двух основных частей. Это — SpeechSynthesis (синтез речи, эта технология известна как Text to Speech или TTS) и SpeechRecognition (распознавание речи). Реализация API Web Speech в браузерах дала возможность организовывать речевое взаимодействия пользователя и браузера, выполняемое посредством голосовых команд. Это, например, голосовой поиск, голосовая навигация, голосовой набор текста.

При использовании этого API всё ещё необходимо пользоваться префиксами браузеров, оно доступно лишь в Chrome и Firefox. Оно, кроме того, использует серверный API Google для распознавания речи. Из-за того, что этот API основан на взаимодействии с серверными ресурсами, пользоваться им можно лишь при подключении к интернету.

Работа с API распознавания речи осуществляется через интерфейс SpeechRecognition. В распоряжении разработчика, пользующегося объектом, созданным с помощью этого интерфейса, имеется набор методов, вроде start(), свойств, наподобие lang, и событий, таких, как onstart и onend.

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

API WebRTC

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

API WebRTC позволяет работать с аудио- и видео-потоками устройств, подключённых к компьютеру, таких, как видеокамеры и микрофоны, без необходимости использования сторонних плагинов.

Этот API поддерживают все современные браузеры и даже клиенты для мобильных платформ, таких, как Android и iOS.

Модель обмена данными, реализованная в API WebRTC отличается от других коммуникационных моделей. Для обеспечения работы этого API в браузерах имеются реализации других API. Вот некоторые из них:

MediaStream — представляет поток медиаданных.
RTCPeerConnection — представляет собой WebRTC-соединение между локальной и удалённой системами.
RTCDataChannel — представляет сетевой канал, который можно использовать для организации двустороннего пирингового обмена произвольными данными.

Другие API

Мы рассмотрели лишь некоторые API, описанные в спецификациях W3C и WHATWG. Существуют и многие другие API, о которых стоит упомянуть. Среди них отметим следующие:

API Canvas 2D Context позволяет формировать в браузере двумерные изображения. Нужно отметить, что в существующем стандарте WHATWG сказано, что в настоящее время активная поддержка этого API прекращена.
API Battery Status позволяет веб-сайту вносить коррективы в свою работу, ориентируясь на уровень заряда батарей устройства. Если заряда осталось мало, то некоторые возможности сайта могут быть отключены.
API Media представляют собой браузерную реализацию средств для работы со звуком и видео. При работе с этим API используются методы наподобие onplay(), canPlayType(), pause(), play() и load().
API Web Workers позволяет запускать JavaScript-код в фоновых потоках, не нагружая главный поток сложными вычислениями и не блокируя работу пользовательского интерфейса, а значит — не мешая пользователю работать с сайтом.
API File позволяет браузеру загружать и обрабатывать файлы из локальной файловой системы. Для выполнения подобных действий необходимо разрешение, полученное от пользователя. Кроме того, этот API позволяет пользователям выбирать несколько файлов. Одна из сильных сторон этого API заключается в том, что он поддерживает технологию DnD, позволяя пользователям перетаскивать файлы на веб-страницы для выполнения неких действий с этими файлами.
API History предназначен для работы с историей посещения страниц, хранимой браузером.
API Server-Sent Events (SSE) позволяет веб-страницам получать данные, отправляемые им по инициативе серверов.

Итоги

За HTML5-атрибутами скрываются мощные API, упрощающие разработку веб-проектов. Они позволяют сделать работу со страницами более интерактивной. Но, к сожалению, на них часто не обращают внимания, отдавая предпочтение JavaScript-реализациям стандартных механизмов.

В разговоре об HTML5-API стоит учитывать тот факт, что они постоянно развиваются. А по мере их развития сглаживаются различия в их реализации в разных браузерах.

Вот что сказано об HTML5-API в одной публикации InfoWorld: «API HTML5, конечно, нельзя назвать универсальным средством для разработки мобильных приложений. Всему своё время и место. Это касается и HTML5-приложений, и нативных приложений, которые всё ещё актуальны».

Не каждая веб-страница и не каждое веб-приложение нуждается в HTML5-API. Но понимание того, что они такое, того, как они работают, знание их сильных и слабых сторон поможет программисту принять решение о том, что именно лучше всего подходит для решения стоящих перед ним задач.

Какими API HTML5 вы пользуетесь чаще всего?