From 8e8d92a50f74b5370984259dc963dac56cc5902b Mon Sep 17 00:00:00 2001 From: MDN Date: Sun, 6 Mar 2022 00:13:06 +0000 Subject: [CRON] sync translated content --- files/ja/_redirects.txt | 5 +- files/ja/_wikihistory.json | 20 ++-- .../web/api/navigator/online/index.html | 127 +++++++++++++++++++++ .../navigator/online_and_offline_events/index.html | 127 --------------------- files/ko/_redirects.txt | 5 +- files/ko/web/api/navigator/online/index.html | 108 ++++++++++++++++++ .../navigator/online_and_offline_events/index.html | 107 ----------------- 7 files changed, 251 insertions(+), 248 deletions(-) create mode 100644 files/ja/conflicting/web/api/navigator/online/index.html delete mode 100644 files/ja/web/api/navigator/online_and_offline_events/index.html create mode 100644 files/ko/web/api/navigator/online/index.html delete mode 100644 files/ko/web/api/navigator/online_and_offline_events/index.html diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 98461ee39d..82f79f7a60 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2811,7 +2811,7 @@ /ja/docs/Notification_object/tag /ja/docs/Web/API/Notification/tag /ja/docs/Notification_object/title /ja/docs/Web/API/Notification/title /ja/docs/Offline_resources_in_Firefox/Using_audio_and_video_in_Firefox /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/ja/docs/Online_and_offline_events /ja/docs/Web/API/Navigator/Online_and_offline_events +/ja/docs/Online_and_offline_events /ja/docs/conflicting/Web/API/Navigator/onLine /ja/docs/Other_JavaScript_tools /ja/docs/Tools /ja/docs/Parsing_and_serializing_XML /ja/docs/Web/Guide/Parsing_and_serializing_XML /ja/docs/Plugins/Guide/Constants /ja/docs/Glossary/Plugin @@ -3182,6 +3182,7 @@ /ja/docs/Web/API/MediaStreamConstraints /ja/docs/conflicting/Web/API/MediaDevices/getUserMedia /ja/docs/Web/API/MouseEvent/which /ja/docs/Web/API/UIEvent/which /ja/docs/Web/API/Navigator.getUserMedia /ja/docs/Web/API/Navigator/getUserMedia +/ja/docs/Web/API/Navigator/Online_and_offline_events /ja/docs/conflicting/Web/API/Navigator/onLine /ja/docs/Web/API/NavigatorID /ja/docs/Web/API/Navigator /ja/docs/Web/API/NavigatorID/appCodeName /ja/docs/Web/API/Navigator/appCodeName /ja/docs/Web/API/NavigatorID/appName /ja/docs/Web/API/Navigator/appName @@ -3193,7 +3194,7 @@ /ja/docs/Web/API/NavigatorLanguage.languages /ja/docs/Web/API/Navigator/languages /ja/docs/Web/API/NavigatorLanguage/language /ja/docs/Web/API/Navigator/language /ja/docs/Web/API/NavigatorLanguage/languages /ja/docs/Web/API/Navigator/languages -/ja/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ja/docs/Web/API/Navigator/Online_and_offline_events +/ja/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ja/docs/conflicting/Web/API/Navigator/onLine /ja/docs/Web/API/NavigatorOnLine/onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/Web/API/NavigatorStorage /ja/docs/orphaned/Web/API/NavigatorStorage /ja/docs/Web/API/NavigatorStorage/storage /ja/docs/orphaned/Web/API/NavigatorStorage/storage diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index eab8b35361..acf6f16c9e 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -18689,16 +18689,6 @@ "fscholz" ] }, - "Web/API/Navigator/Online_and_offline_events": { - "modified": "2019-03-23T23:53:08.504Z", - "contributors": [ - "chrisdavidmills", - "ethertank", - "Marsf", - "Mgjbot", - "Koyamak" - ] - }, "Web/API/Navigator/activeVRDisplays": { "modified": "2020-10-15T21:47:31.877Z", "contributors": [ @@ -48425,6 +48415,16 @@ "e53e04ac" ] }, + "conflicting/Web/API/Navigator/onLine": { + "modified": "2019-03-23T23:53:08.504Z", + "contributors": [ + "chrisdavidmills", + "ethertank", + "Marsf", + "Mgjbot", + "Koyamak" + ] + }, "conflicting/Web/API/Pointer_events": { "modified": "2019-03-18T20:45:32.564Z", "contributors": [ diff --git a/files/ja/conflicting/web/api/navigator/online/index.html b/files/ja/conflicting/web/api/navigator/online/index.html new file mode 100644 index 0000000000..e30c9d6c63 --- /dev/null +++ b/files/ja/conflicting/web/api/navigator/online/index.html @@ -0,0 +1,127 @@ +--- +title: オンライン・オフラインイベント +slug: conflicting/Web/API/Navigator/onLine +tags: + - AJAX + - DOM + - HTML5 + - Intermediate + - NeedsUpdate + - Offline web applications + - Web Development +translation_of: Web/API/Navigator/Online_and_offline_events +original_slug: Web/API/Navigator/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 からのレスポンスを使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。

+ +

参考文献

+ + 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 deleted file mode 100644 index 15fc35b7c8..0000000000 --- a/files/ja/web/api/navigator/online_and_offline_events/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -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 からのレスポンスを使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。

- -

参考文献

- - diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 0dcfb7500c..dec0d5b016 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -409,7 +409,7 @@ /ko/docs/Navigation_timing /ko/docs/Web/API/Navigation_timing_API /ko/docs/Node_server_without_framework /ko/docs/Learn/Server-side/Node_server_without_framework /ko/docs/Notable_bugs_fixed_in_Firefox_3 /ko/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed -/ko/docs/Online_and_offline_events /ko/docs/Web/API/Navigator/Online_and_offline_events +/ko/docs/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Plugins/Guide/Scripting_plugins /ko/docs/Glossary/Plugin /ko/docs/SVG /ko/docs/Web/SVG /ko/docs/SVG/Tutorial /ko/docs/Web/SVG/Tutorial @@ -466,11 +466,12 @@ /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection +/ko/docs/Web/API/Navigator/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Web/API/NavigatorID /ko/docs/Web/API/Navigator /ko/docs/Web/API/NavigatorLanguage /ko/docs/Web/API/Navigator /ko/docs/Web/API/NavigatorLanguage/language /ko/docs/Web/API/Navigator/language /ko/docs/Web/API/NavigatorOnLine /ko/docs/Web/API/Navigator/language -/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ko/docs/Web/API/Navigator/Online_and_offline_events +/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ko/docs/Web/API/Navigator/onLine /ko/docs/Web/API/NetworkInformation.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection diff --git a/files/ko/web/api/navigator/online/index.html b/files/ko/web/api/navigator/online/index.html new file mode 100644 index 0000000000..b28eb025c1 --- /dev/null +++ b/files/ko/web/api/navigator/online/index.html @@ -0,0 +1,108 @@ +--- +title: Online and offline events +slug: Web/API/Navigator/onLine +tags: + - AJAX + - DOM + - Web Development +translation_of: Web/API/Navigator/Online_and_offline_events +original_slug: Web/API/Navigator/Online_and_offline_events +--- +

In progress Firefox 3는 WHATWG 웹 애플리케이션 1.0 명세에 기술된 온라인/오프라인 이벤트를 구현합니다.

+ +

개요

+ +

좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.

+ +
    +
  1. 여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.
    2. +
  2. 여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.
    3. +
+ +

온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.

+ +

여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 HEAD 섹션에 LINK 요소를 포함합니다.

+ +
<link rel="offline-resource" href="myresource">
+
+ +

이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.

+ +

API

+ + + +

navigator.onLine는 true/false(온라인은 true, 오프라인은 false)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -> 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.

+ +

또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:

+ +
사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) navigator.onLine 속성은 false를 반환해야 합니다...
+ +

Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.

+ +

이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.

+ +

"online"과 "offline" 이벤트

+ +

Firefox 3는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "online"과 "offline"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <body>에서 발생합니다. 덧붙여, 이 이벤트는 document.body에서 document로 전달되고 window에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).

+ +

널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.

+ + + +

예제

+ +

이벤트가 동작하는지 확인할 수 있는 간단한 테스트 케이스가 있습니다. XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+ +

참고

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}

diff --git a/files/ko/web/api/navigator/online_and_offline_events/index.html b/files/ko/web/api/navigator/online_and_offline_events/index.html deleted file mode 100644 index 039240fedc..0000000000 --- a/files/ko/web/api/navigator/online_and_offline_events/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Online and offline events -slug: Web/API/Navigator/Online_and_offline_events -tags: - - AJAX - - DOM - - Web Development -translation_of: Web/API/Navigator/Online_and_offline_events ---- -

In progress Firefox 3는 WHATWG 웹 애플리케이션 1.0 명세에 기술된 온라인/오프라인 이벤트를 구현합니다.

- -

개요

- -

좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.

- -
    -
  1. 여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.
    2. -
  2. 여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.
    3. -
- -

온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.

- -

여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 HEAD 섹션에 LINK 요소를 포함합니다.

- -
<link rel="offline-resource" href="myresource">
-
- -

이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.

- -

API

- - - -

navigator.onLine는 true/false(온라인은 true, 오프라인은 false)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -> 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.

- -

또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:

- -
사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) navigator.onLine 속성은 false를 반환해야 합니다...
- -

Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.

- -

이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.

- -

"online"과 "offline" 이벤트

- -

Firefox 3는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "online"과 "offline"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <body>에서 발생합니다. 덧붙여, 이 이벤트는 document.body에서 document로 전달되고 window에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).

- -

널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.

- - - -

예제

- -

이벤트가 동작하는지 확인할 수 있는 간단한 테스트 케이스가 있습니다. XXX When mochitests for this are created, point to those instead and update this example -nickolay

- -
 <!doctype html>
- <html>
- <head>
-   <script>
-     function updateOnlineStatus(msg) {
-       var status = document.getElementById("status");
-       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-       status.setAttribute("class", condition);
-       var state = document.getElementById("state");
-       state.innerHTML = condition;
-       var log = document.getElementById("log");
-       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
-     }
-     function loaded() {
-       updateOnlineStatus("load");
-       document.body.addEventListener("offline", function () {
-         updateOnlineStatus("offline")
-       }, false);
-       document.body.addEventListener("online", function () {
-         updateOnlineStatus("online")
-       }, false);
-     }
-   </script>
-   <style>...</style>
- </head>
- <body onload="loaded()">
-   <div id="status"><p id="state"></p></div>
-   <div id="log"></div>
- </body>
- </html>
-
- -

참고

- - - -

 

- -

 

- -
 
- -

{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}

-- cgit v1.2.3-54-g00ecf