Вступление
Одной из самых обсуждаемых концепций в мире веб-дизайна является адаптивный веб-дизайн. Тысячи статей были написаны об адаптивном веб-дизайне, и поэтому я не буду обсуждать это в этой статье. Однако адаптивный веб-дизайн имеет важное ограничение, адаптивный веб-дизайн по большей части основан на размере области просмотра браузера.
Хотя этот подход хорошо подходит для обработки изображений правильного размера и разрешения, он не идеален во всех ситуациях, в качестве примера можно привести видеоконтент. В этих случаях нам действительно нужна дополнительная информация о сетевом подключении устройства.
Представьте, что вы посещаете YouTube на своем смартфоне или планшете. Вы дома и подключены через Wi-Fi. В таких случаях вас не заботит количество загружаемых байтов, вас интересует только качественный видеоконтент. Это не так, если вы подключены через медленную мобильную связь. В таком случае, вы хотите посмотреть видео, качество вторично.
Я должен понимать, что каждый разработчик, который хочет, чтобы веб-сайт был действительно хорошим, все же должен оптимизировать ресурсы, которые он обслуживает, чтобы страницы могли загружаться максимально быстро. Однако в приведенном выше примере подача видео высокого разрешения — не трата пропускной способности пользователя, а улучшение работы пользователя.
Сетевой информационный API — это именно то, что нам нужно, чтобы узнать больше о сетевом подключении устройства.
1. Что это?
API информации о сети предоставляет доступ к типу соединения, которое система использует для связи с сетью, сотовой связью, Wi-Fi, Bluetooth и т. Д. Он также предоставляет средства для уведомления сценариев об изменении типа соединения. Это позволяет разработчикам вносить динамические изменения в DOM и / или информировать пользователя об изменении типа сетевого подключения.
Первый выпуск спецификации API Network Information был в 2011 году, но с тех пор API несколько раз менялся. В доказательство этого текущая версия представляет собой простой проект редактора, что означает, что она обязательно изменится в будущем.
Несмотря на изменения, варианты использования этого API настолько интересны, что его действительно стоит изучить. В этой статье мы обсудим последнюю версию спецификации, но также рассмотрим некоторые устаревшие свойства и события по причинам, которые я объясню позже.
2. Реализация
Текущая версия API информации о сети предоставляет объект connection который принадлежит объекту window.navigator . Объект connection содержит одно свойство type , которое возвращает тип подключения агента пользователя. Свойство type может иметь одно из следующих значений:
-
bluetooth -
cellular -
ethernet -
none -
wifi -
other -
unknown
Некоторые из этих значений, такие как bluetooth и wifi , не требуют пояснений, в то время как другие требуют более подробного объяснения. Тип cellular относится к мобильному соединению, такому как EDGE, 3G, 4G и т. Д. other тип означает, что текущий тип соединения не является unknown , но он также не является ни одним из других типов. unknown тип означает, что пользовательский агент установил сетевое соединение, но не может определить тип соединения.
В дополнение к type API информации о сети предоставляет событие ontypechange . Он запускается каждый раз, когда тип сетевого подключения изменяется.
Разработчики могут использовать API информации о сети, чтобы изменить некоторые функции в зависимости от текущего типа соединения. Например, мы можем замедлить процесс, который занимает значительную полосу пропускания, если мы обнаружим, что устройство использует мобильное соединение. API также позволяет нам назначать определенный элемент html элементу, например, с high-bandwidth , точно так же, как это делает Modernizr . Мы можем использовать CSS для изменения одного или нескольких свойств элемента, например фонового изображения.
Теперь, когда мы знаем, что делает API Network Information, и кому мы можем его использовать, давайте посмотрим, какие браузеры поддерживают API.
3. Поддержка браузера
На момент написания, API информации о сети поддерживается только Firefox с использованием префикса поставщика и Chrome Canary. В Chrome Canary мы должны включить флаг функций экспериментальной веб-платформы для использования API. Вы можете найти больше информации в этом посте Полом Ирландским .
Как будто поддержка API информации о сети еще не была достаточно слабой, Firefox до версии 30, самая последняя версия, поддерживает старую спецификацию API. По этой причине и в случае, если вы хотите поиграть с API-интерфейсом Network Information API, важно взглянуть на свойства и события, описанные в предыдущей спецификации API.
Старая спецификация выставляла два свойства, bandwidth и metered . Свойство bandwidth является двойным значением, представляющим оценку текущей полосы пропускания в мегабайтах в секунду (МБ / с). Свойство metered является логическим значением, которое указывает, подвержено ли сетевое подключение устройства каким-либо ограничениям. Предыдущая спецификация также определила событие onchange чтобы уведомить любых слушателей об изменениях вышеупомянутых свойств.
Чтобы дать вам представление о новой и старой версии спецификации, в следующем разделе мы создадим демонстрационную версию, в которой будут использованы оба варианта.
4. Демо
Пока что мы рассмотрели свойства и события, предоставляемые API, а также варианты использования API. В этом разделе мы собираемся создать простую веб-страницу, чтобы увидеть API в действии.
Демонстрация состоит из страницы HTML5, которая имеет неупорядоченный список с тремя элементами списка. Каждый элемент содержит текстовый фрагмент для проверки значения свойств, предоставляемых старой и новой спецификацией API информации о сети. Элементы списка по умолчанию скрыты и отображаются, только если поддерживаются соответствующие свойства.
Демонстрация также обнаруживает, реализует ли браузер старую спецификацию API (для Firefox) и поддерживает ли браузер API сетевой информации вообще. В первом случае вы увидите сообщение « Поддерживается старая версия API» , во втором случае будет отображаться сообщение « API не поддерживается» .
Тестирование на поддержку API Network Information очень просто, как вы можете видеть ниже:
|
1
2
3
4
5
6
7
8
9
|
// Deal with vendor prefixes
var connection = window.navigator.connection ||
window.navigator.mozConnection ||
null;
if (connection === null) {
// API not supported 🙁
} else {
// API supported!
}
|
Чтобы определить, является ли реализованная версия старой спецификацией, мы можем проверить наличие metered свойства, как показано ниже:
|
1
2
3
4
5
|
if (‘metered’ in connection) {
// Old version
} else {
// New version
}
|
После того, как мы проверили поддержку API информации о сети и выяснили, какую версию спецификации поддерживает браузер, мы можем прикрепить обработчик к правильному событию. Внутри обработчика мы обновляем текст соответствующего элемента списка, например, type для новой спецификации API.
Вы можете найти полный код демо ниже и вы также можете играть с ним, если хотите.
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
|
<!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>Network Information 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>Network Information API</h1>
<span id=»ni-unsupported» class=»api-support hidden»>API not supported
<span id=»nio-supported» class=»api-support hidden»>Old API version supported
<ul>
<li class=»new-api hidden»>
The connection type is <span id=»t-value» class=»value»>undefined
</li>
<li class=»old-api hidden»>
The connection bandwidth is <span id=»b-value» class=»value»>undefined
</li>
<li class=»old-api hidden»>
The connection is <span id=»m-value» class=»value»>undefined
</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>
var connection = window.navigator.connection ||
window.navigator.mozConnection ||
null;
if (connection === null) {
document.getElementById(‘ni-unsupported’).classList.remove(‘hidden’);
} else if (‘metered’ in connection) {
document.getElementById(‘nio-supported’).classList.remove(‘hidden’);
[].slice.call(document.getElementsByClassName(‘old-api’)).forEach(function(element) {
element.classList.remove(‘hidden’);
});
var bandwidthValue = document.getElementById(‘b-value’);
var meteredValue = document.getElementById(‘m-value’);
connection.addEventListener(‘change’, function (event) {
bandwidthValue.innerHTML = connection.bandwidth;
meteredValue.innerHTML = (connection.metered ? » : ‘not ‘) + ‘metered’;
});
connection.dispatchEvent(new Event(‘change’));
} else {
var typeValue = document.getElementById(‘t-value’);
[].slice.call(document.getElementsByClassName(‘new-api’)).forEach(function(element) {
element.classList.remove(‘hidden’);
});
connection.addEventListener(‘typechange’, function (event) {
typeValue.innerHTML = connection.type;
});
connection.dispatchEvent(new Event(‘typechange’));
}
</script>
</body>
</html>
|
Вывод
В этой статье я познакомил вас с API информации о сети. В первой части этой статьи мы обсудили, что такое API и что он может сделать для нас. Мы также узнали, какие свойства и события предоставляет API Network Information. Как я уже упоминал в разделе « Поддержка браузера» , API в настоящее время плохо поддерживается, но это частично связано с некоторыми изменениями спецификации API.
API информации о сети очень прост в использовании, и нет никаких оправданий для того, чтобы не воспользоваться информацией, которую он предлагает, если она поддерживается большим количеством браузеров. Что вы думаете об этом API? Будете ли вы использовать его, когда он поддерживается несколькими браузерами?