blob: 3124e7cdb1106c1dc67a696b8f5d7833e28a911c (
plain)
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
- Network Information API
- Reference
- WebAPI
translation_of: Web/API/Network_Information_API
---
<p>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</p>
<p>Network Information API はシステムのネットワーク接続に関する情報を、一般的な接続タイプ (例: 'wifi' や 'cellular' など) の観点から提供します。これは、ユーザーの接続を元に高解像度コンテンツまたは低解像度コンテンツを選択するために使用することができます。API の全体像は {{domxref("NetworkInformation")}} インターフェイスの追加と、{{domxref("Navigator")}} インターフェイスに追加された 1 個のプロパティ {{domxref("Navigator.connection")}} で構成されます。</p>
<p>{{AvailableInWorkers}}</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Detect_connection_changes" name="Detect_connection_changes">接続の変化の検出</h3>
<p>以下の例では、ユーザーの接続の変化を監視します。</p>
<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;
function updateConnectionStatus() {
console.log("接続タイプが" + type + "から" + connection.effectiveType + "に変化");
type = connection.effectiveType;
}
connection.addEventListener('change', updateConnectionStatus);
</pre>
<h3 id="Preload_large_resources" name="Preload_large_resources">大きなリソースを事前読み込み</h3>
<p>接続オブジェクトは、大きな帯域幅やメモリが使われるリソースを事前読み込みするかどうか決める場合に便利です。以下の例は、ページの読み込み直後に呼び出され、動画の事前読み込みが望ましくない場合の接続タイプを確かめます。携帯電話回線接続が見つかると、 <code>preloadVideo</code> フラグは <code>false</code> に設定されます。コードをわかりやすくするために、この例ではひとつの接続タイプだけをテストしました。実際に使う場合には、 <code>switch</code> 文その他のやり方で、 {{domxref("NetworkInformation.type")}} の可能な値すべてを確かめることになるでしょう。 <code>type</code> の値にかかわらず、 {{domxref("NetworkInformation.effectiveType")}} プロパティを用いて接続速度を見積もることができます。</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="Interfaces" name="Interfaces">インターフェイス</h2>
<dl>
<dt>{{domxref("NetworkInformation")}}</dt>
<dd>端末がネットワーク通信に使用している接続方法の情報を提供します。また、接続タイプが変更された場合に、スクリプトへ通知する手段も提供します。 <code>NetworkInformation</code> インターフェイスはインスタンス化できません。代わりに、 {{domxref("Navigator")}} インターフェイスを通してアクセスします。</dd>
</dl>
<h2 id="Specifications" name="Specifications">仕様書</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="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<h3 id="NetworkInformation">NetworkInformation</h3>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("api.NetworkInformation")}}</p>
<h3 id="Navigator.connection">Navigator.connection</h3>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("api.Navigator.connection")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{spec("http://w3c.github.io/netinfo/", "Network Information API Specification", "ED")}}</li>
<li><a href="/ja/docs/Online_and_offline_events">Online and offline events</a></li>
<li>{{domxref("Navigator.connection", "window.navigator.connection")}}</li>
</ul>
|
