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
86
87
88
89
90
91
92
93
|
---
title: Network Information API
slug: Web/API/Network_Information_API
tags:
- API
- Experimental
- JSAPI Reference
- Referencia
translation_of: Web/API/Network_Information_API
---
<p>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</p>
<p>La Network Information (Información de red) API provee información sobre el sistema de conexión en términos genéricos de tipos de conexión (ej., 'wifi', 'cellular', etc.). Esta puede ser usada para elegir contenido en alta definición o contenido baja definición basándose en la conexión del usuario. Toda la API consiste en la adición de la {{domxref("NetworkInformation")}} interfaz y una única propiedad para la {{domxref("Navigator")}} interfaz: {{domxref("Navigator.connection")}}.</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Examples">Examples</h2>
<h3 id="Detectar_cambios_de_conexiónThis_example_watches_for_changes_to_the_users_connection."><span style="">Detectar cambios de conexión</span><span style="">This example watches for changes to the user's connection.</span></h3>
<pre class="brush: js notranslate">var conexion = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var tipo = connection.effectiveType;
function updateConnectionStatus() {
console.log("Connection type changed from " + tipo + " to " + conexion.effectiveType);
tipo = conexion.effectiveType;
}
conexion.addEventListener('change', updateConnectionStatus);
</pre>
<h3 id="Precargar_recursos_grandes"><span style="">Precargar recursos grandes</span></h3>
<p><span style="">El objeto de conexión es muy útil por ir decidiendo entre precargar recursos que ocupan mucho ancho de banda o memoria. Este ejemplo puede ser llamado justo después de que la página cargue para verificar el tipo de conexión donde precargar un video tal vez no sea lo deseado.Si se detecta la conexión de un celular, entonces el </span><code style="">preloadVideo</code><span style=""> flag está seteado en </span><code style="">false</code><span style="">. Para simplificación y claridad, este ejemplo sólo testea un tipo de conexión. Una real-word usa case probablemente una declaración de switch o otro método para verificar todos los posibles valores de</span> {{domxref("NetworkInformation.type")}}.<span style=""> <br>
<br>
en caso usaría una declaración de switch o algún otro método para verificar todos los valores posibles de<br>
use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. </span>Independientemente del valor de tipo, puede obtener una estimación de la velocidad de conexión a través de la propiedad<span style=""> {{domxref("NetworkInformation.effectiveType")}}.</span></p>
<pre class="brush: js notranslate">let precargarVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
if (connection.effectiveType === 'slow-2g') {
precargarVideo = false;
}
}</pre>
<h2 id="Interfaces">Interfaces</h2>
<dl>
<dt>{{domxref("NetworkInformation")}}</dt>
<dd>Provee información sobre la conexión de un dispositivo si está usándose para cominicarse con la red y proveer un tipo de scripts para ser notificado si el tipo de conexión cambia. La intefaz de <code>NetworkInformation</code> no puede ser inicializada. En lugar de esto, se accede a través de la interfaz {{domxref("Navigator")}}.</dd>
</dl>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especifiación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Network Information', '', 'Network Information API')}}</td>
<td>{{Spec2('Network Information')}}</td>
<td>Initial specification</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
<h3 id="NetworkInformation">NetworkInformation</h3>
<p>{{Compat("api.NetworkInformation")}}</p>
<h3 id="Navigator.connection">Navigator.connection</h3>
<p>{{Compat("api.Navigator.connection")}}</p>
<h2 id="Véase_también">Véase también</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>
|
