orphaned/Web/API/NavigatorOnLine 以下を移動 (#1657)

* orphaned/Web/API/NavigatorOnLine 以下を移動

- Web/API/Navigator 以下へ移動
- 2021/07/22 時点の英語版に同期
- https://github.com/mdn/translated-content/pull/612 対策

* 用語の修正漏れを修正

* fix flaws

2 files changed, 205 insertions, 0 deletions

diff --git a/files/ja/web/api/navigator/online/index.html b/files/ja/web/api/navigator/online/index.html
new file mode 100644
index 0000000000..e10c02acbe
--- /dev/null
+++ b/files/ja/web/api/navigator/online/index.html
@@ -0,0 +1,78 @@
+---
+title: Navigator.onLine
+slug: Web/API/Navigator/onLine
+tags:
+  - API
+  - DOM Reference
+  - Navigator
+  - Online
+  - Property
+  - Reference
+translation_of: Web/API/Navigator/onLine
+original_slug: Web/API/NavigatorOnLine/onLine
+browser-compat: api.Navigator.onLine
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>ブラウザーのオンライン状態を返します。このプロパティは、オンラインを意味する <code>true</code> とオフラインを意味する <code>false</code> の論理値を返します。このプロパティは、ブラウザーのネットワークへの接続状態が変化するたびに更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページを要求したときに発生します。例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは <code>false</code> を返します。</p>
+
+<p>このプロパティの実装は、ブラウザーにより異なります。</p>
+
+<p>Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では <code>true</code> を返します。従って、<code>false</code> 値が返る場合はブラウザーがオフラインであると考えることができますが、<code>true</code> 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。詳しくは HTML5 Rocks の記事 <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a> をご覧ください。</p>
+
+<p>Firefox と Internet Explorer では、ブラウザーをオフラインモードに切り替えると、 <code>false</code> 値が送信されます。 Firefox 41 までは、それ以外の条件では <code>true</code> 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。</p>
+
+<p><a href="/ja/docs/Web/API/document.ononline"><code>window.ononline</code></a> および <a href="/ja/docs/Web/API/document.onoffline"><code>window.onoffline</code></a> イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p><code>online</code> には <code>true</code> または <code>false</code> の論理値が返されます。</p>
+
+<h2 id="Example">例</h2>
+
+<h3 id="Basic_usage">基本的な使い方</h3>
+
+<p>オンラインであるかを確認するには、以下の例のように <code>window.navigator.onLine</code> を確認します。</p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  console.log('online');
+} else {
+  console.log('offline');
+}</pre>
+
+<p>ブラウザーが <code>navigator.onLine</code> に対応していない場合は、上記の例では常に <code>false</code>/<code>undefined</code> が返ります。</p>
+
+<h3 id="Listening_for_changes_in_network_status">ネットワーク状態の変化の待ち受け
+</h3>
+
+<p>ネットワーク接続状態の変化を確認するには、以下の例のように <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を使用して、 <code>window.online</code> および <code>window.offline</code> を待ち受けします。</p>
+
+<pre class="brush: js">window.addEventListener('offline', function(e) { console.log('offline'); });
+
+window.addEventListener('online', function(e) { console.log('online'); });
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="Notes">注</h2>
+
+<p>Firefox 3 で導入された新しいオフライン関連イベントと、このプロパティの詳しい説明は、<a href="/ja/docs/Web/API/Navigator/Online_and_offline_events">Online/Offline Events‎</a> を参照してください。</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/ja/web/api/navigator/online_and_offline_events/index.html b/files/ja/web/api/navigator/online_and_offline_events/index.html
new file mode 100644
index 0000000000..c0a18179d4
--- /dev/null
+++ b/files/ja/web/api/navigator/online_and_offline_events/index.html
@@ -0,0 +1,127 @@
+---
+title: オンライン・オフラインイベント
+slug: Web/API/Navigator/Online_and_offline_events
+tags:
+  - AJAX
+  - DOM
+  - HTML5
+  - Intermediate
+  - NeedsUpdate
+  - Offline web applications
+  - Web Development
+translation_of: Web/API/Navigator/Online_and_offline_events
+original_slug: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>一部のブラウザーは、 <a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline イベント</a>を <a href="https://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 仕様書</a>に従って実装しています。</p>
+
+<h3 id="Overview">概要</h3>
+
+<p>オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。</p>
+
+<ol>
+  <li>サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。</li>
+  <li>サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。</li>
+</ol>
+
+<p>オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。</p>
+
+<p>残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。</p>
+
+<h2 id="API">API</h2>
+
+<h3 id="navigator.onLine"><code>navigator.onLine</code></h3>
+
+<p><code><a href="/ja/docs/Web/API/Navigator/onLine">navigator.onLine</a></code> は、 <code>true</code>/<code>false</code> の値を保持しているプロパティです (オンラインの場合は <code>true</code>、オフラインの場合は <code>false</code>)。</p>
+
+<p>このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。</p>
+
+<blockquote cite="https://www.whatwg.org/specs/web-apps/current-work/#offline">
+  <code>navigator.onLine</code> 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。</blockquote>
+
+<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/en-US/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p>
+
+<p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p>
+
+<h3 id=".22online.22_and_.22offline.22_events">"<code>online</code>" および "<code>offline</code>" イベント</h3>
+
+<p><a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a> は 2 つの新しいイベントを導入しました。"<a href="/ja/docs/Web/API/document.ononline"><code>online</code></a>" and "<a href="/ja/docs/Web/API/document.onoffline"><code>offline</code></a>" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <code>&lt;body&gt;</code> に発行されます。加えて、このイベントは <code>document.body</code> から <code>document</code> へとバブリングし、 <code>window</code> までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。</p>
+
+<p><a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。</p>
+
+<p>これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。</p>
+<ul>
+ <li><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を、 <code>window</code>, <code>document</code>, <code>document.body</code> に対して使用します。</li>
+  <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティを JavaScript の <code>Function</code> オブジェクトに設定します。(<strong>注意:</strong> <code>window.ononline</code> または <code>window.onoffline</code> は互換性の理由で動作しません)</li>
+  <li>HTML マークアップで <code>&lt;body&gt;</code> タグの <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を指定します。</li>
+</ul>
+
+<h2 id="Example">例</h2>
+
+<p>イベントが機能しているかどうかを確認するために、<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a>を用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。</p>
+
+<p>こちらが JavaScript 部分です。</p>
+
+<pre class="brush: js">window.addEventListener('load', function() {
+  var status = document.getElementById("status");
+  var log = document.getElementById("log");
+
+  function updateOnlineStatus(event) {
+    var condition = navigator.onLine ? "online" : "offline";
+
+    status.className = condition;
+    status.innerHTML = condition.toUpperCase();
+
+    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
+  }
+
+  window.addEventListener('online',  updateOnlineStatus);
+  window.addEventListener('offline', updateOnlineStatus);
+});</pre>
+
+<p>CSS 部分です。</p>
+
+<pre class="brush: css">#status {
+  position: fixed;
+  width: 100%;
+  font: bold 1em sans-serif;
+  color: #FFF;
+  padding: 0.5em;
+}
+
+#log {
+  padding: 2.5em 0.5em 0.5em;
+  font: 1em sans-serif;
+}
+
+.online {
+  background: green;
+}
+
+.offline {
+  background: red;
+}
+</pre>
+
+<p>対応する HTML です。 <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="brush: html">&lt;div id="status"&gt;&lt;/div&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+&lt;p&gt;This is a test&lt;/p&gt;
+</pre>
+
+<p>実行例はこちらです。</p>
+
+<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p>
+
+<h2 id="Notes">注</h2>
+
+<p>この API がブラウザに実装されていない場合は、サービスワーカーや  <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。</p>
+
+<h2 id="References">参考文献</h2>
+
+<ul>
+  <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG Web Applications 1.0 仕様の「Online/Offline イベント」の節</a></li>
+  <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Firefox に実装された online/offline イベントのバグ追跡</a>および<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">関連バグ</a></li>
+  <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a></li>
+  <li><a href="http://ejohn.org/blog/offline-events/">Online/Offline イベントの解説</a></li>
+</ul>