From 280c67f60ca8287860d62294e1984e6a39d8eab0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 2 Aug 2021 00:35:48 +0900 Subject: orphaned/Web/API/NavigatorOnLine 以下を移動 (#1657) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * orphaned/Web/API/NavigatorOnLine 以下を移動 - Web/API/Navigator 以下へ移動 - 2021/07/22 時点の英語版に同期 - https://github.com/mdn/translated-content/pull/612 対策 * 用語の修正漏れを修正 * fix flaws --- files/ja/web/api/navigator/online/index.html | 78 +++++++++++++ .../navigator/online_and_offline_events/index.html | 127 +++++++++++++++++++++ 2 files changed, 205 insertions(+) create mode 100644 files/ja/web/api/navigator/online/index.html create mode 100644 files/ja/web/api/navigator/online_and_offline_events/index.html (limited to 'files/ja/web/api') 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 +--- +
{{ApiRef("HTML DOM")}}
+ +

ブラウザーのオンライン状態を返します。このプロパティは、オンラインを意味する true とオフラインを意味する false の論理値を返します。このプロパティは、ブラウザーのネットワークへの接続状態が変化するたびに更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページを要求したときに発生します。例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは false を返します。

+ +

このプロパティの実装は、ブラウザーにより異なります。

+ +

Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では true を返します。従って、false 値が返る場合はブラウザーがオフラインであると考えることができますが、true 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。詳しくは HTML5 Rocks の記事 Working Off the Grid をご覧ください。

+ +

Firefox と Internet Explorer では、ブラウザーをオフラインモードに切り替えると、 false 値が送信されます。 Firefox 41 までは、それ以外の条件では true 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。

+ +

window.ononline および window.onoffline イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。

+ +

構文

+ +
online = window.navigator.onLine;
+
+ +

値

+ +

online には true または false の論理値が返されます。

+ +

例

+ +

基本的な使い方

+ +

オンラインであるかを確認するには、以下の例のように window.navigator.onLine を確認します。

+ +
if (navigator.onLine) {
+  console.log('online');
+} else {
+  console.log('offline');
+}
+ +

ブラウザーが navigator.onLine に対応していない場合は、上記の例では常に false/undefined が返ります。

+ +

ネットワーク状態の変化の待ち受け +

+ +

ネットワーク接続状態の変化を確認するには、以下の例のように addEventListener を使用して、 window.online および window.offline を待ち受けします。

+ +
window.addEventListener('offline', function(e) { console.log('offline'); });
+
+window.addEventListener('online', function(e) { console.log('online'); });
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

注

+ +

Firefox 3 で導入された新しいオフライン関連イベントと、このプロパティの詳しい説明は、Online/Offline Events‎ を参照してください。

+ +

関連情報

+ + 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 +--- +

一部のブラウザーは、 Online/Offline イベントを WHATWG Web Applications 1.0 仕様書に従って実装しています。

+ +

概要

+ +

オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。

+ +
    +
  1. サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。
    2. +
  2. サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。
    3. +
+ +

オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。

+ +

残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり XMLHttpRequest からのレスポンスを使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。

+ +

API

+ + + +

navigator.onLine は、 true/false の値を保持しているプロパティです (オンラインの場合は true、オフラインの場合は false)。

+ +

このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。

+ +
+ navigator.onLine 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。
+ +

Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 Firefox 41 は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。

+ +

このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。

+ +

"online" および "offline" イベント

+ +

Firefox 3 は 2 つの新しいイベントを導入しました。"online" and "offline" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <body> に発行されます。加えて、このイベントは document.body から document へとバブリングし、 window までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。

+ +

Firefox 41 では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。

+ +

これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。

+ + +

例

+ +

イベントが機能しているかどうかを確認するために、簡単なテストケースを用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。

+ +

こちらが JavaScript 部分です。

+ +
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);
+});
+ +

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;
+}
+
+ +

対応する HTML です。 XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +
<div id="status"></div>
+<div id="log"></div>
+<p>This is a test</p>
+
+ +

実行例はこちらです。

+ +

{{ EmbedLiveSample('Example', '100%', '150') }}

+ +

注

+ +

この API がブラウザに実装されていない場合は、サービスワーカーや XMLHttpRequest からのレスポンスを使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。

+ +

参考文献

+ + -- cgit v1.2.3-54-g00ecf