1
2
3
4
5
6
7
8
9
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
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: Network Information API
slug: Web/API/Network_Information_API
translation_of: Web/API/Network_Information_API
---
<div>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</div>
<p>API Network Information позволяет определить тип интернет-подключения системы (<code>'wifi'</code>, <code>'cellular'</code> и т.д.). Эту информацию можно использовать, к примеру, для того, чтобы предоставлять контент большего либо меньшего разрешения в зависимости от качества соединения. Весь API состоит из интерфейса {{domxref("NetworkInformation")}}, добавленного в глобальный объект {{domxref("Navigator")}} как свойство {{domxref("Navigator.connection")}}.</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Определение_изменения_соединения">Определение изменения соединения</h3>
<p>Данный пример отслеживает изменение подключения пользователя.</p>
<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;
function updateConnectionStatus() {
console.log("Connection type changed from " + type + " to " + connection.effectiveType);
type = connection.effectiveType;
}
connection.addEventListener('change', updateConnectionStatus);
</pre>
<h3 id="Предварительная_загрузка_крупных_ресурсов">Предварительная загрузка крупных ресурсов</h3>
<p>The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the <code>preloadVideo</code> flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Regardless of the <code>type</code> value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.</p>
<pre class="brush: js notranslate">let preloadVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
if (connection.effectiveType === 'slow-2g') {
preloadVideo = false;
}
}</pre>
<h2 id="Интерфейсы">Интерфейсы</h2>
<dl>
<dt>{{domxref("NetworkInformation")}}</dt>
<dd>Даёт возможность получить информацию о сетевом соединении, а также возможность получать события при изменении типа соединения. Невозможно создавать экземпляры данного интерфейса, для получения доступа используйте {{domxref("Navigator")}}.</dd>
</dl>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Network Information', '', 'Network Information API')}}</td>
<td>{{Spec2('Network Information')}}</td>
<td>Изначальная спецификация.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость">Совместимость</h2>
<h3 id="NetworkInformation"><code>NetworkInformation</code></h3>
<p>{{Compat("api.NetworkInformation")}}</p>
<h3 id="Navigator.connection"><code>Navigator.connection</code></h3>
<p>{{Compat("api.Navigator.connection")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li>
<li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
<li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li>
</ul>
|
