JavaScriptでインターネット接続がオフラインであることを検出するにはどうすればよいですか？
回答:
失敗したXHRリクエストを行うことで、接続が失われたと判断できます。
標準的なアプローチは、リクエストを数回再試行することです。うまくいかない場合は、接続を確認するようユーザーに警告し、正常に失敗します。
補足：アプリケーション全体を「オフライン」の状態にすると、エラーの発生しやすい処理の状態が大量に発生する可能性があります。ワイヤレス接続の開始や終了などが発生する可能性があります。データがあれば、ユーザーに警告します。最終的には接続の問題がある場合はそれらを修正し、かなりの寛容さでアプリの使用を継続できるようにします。
補足： Googleのような信頼性の高いサイトで接続を確認することもできますが、これは、自分のリクエストを作成するだけでは完全に役立つとは限りません。独自の接続問題を処理する必要があります。pingをgoogleに送信することは、インターネット接続自体がダウンしていることを確認するための良い方法です。その情報が役立つ場合は、トラブルに値するかもしれません。
補足：Pingの送信は、あらゆる種類の双方向Ajaxリクエストを行うのと同じ方法で実現できますが、この場合、Pingをgoogleに送信すると、いくつかの課題が発生します。まず、Ajax通信の作成で通常発生するのと同じクロスドメインの問題があります。1つのオプションは、サーバー側のプロキシを設定することです。この場合、実際にpinggoogle（またはその他のサイト）を実行し、pingの結果をアプリに返します。これはキャッチです-22インターネット接続が実際に問題である場合、サーバーにアクセスできず、接続問題が自分のドメインでのみ発生している場合は、違いを区別できません。たとえば、google.comを参照するiframeをページに埋め込み、iframeをポーリングして成功/失敗を調べます（コンテンツを調べるなど）。何が起こっているのかについて適切な結論を出すためには、通信メカニズムからの有用な応答が必要であるため、画像を埋め込んでも実際には何もわかりません。繰り返しになりますが、インターネット接続の状態を全体として判断することは、それよりも困難な場合があります。特定のアプリに対してこれらのオプションを重み付けする必要があります。
IE 8はwindow.navigator.onLineプロパティをサポートします。
しかし、もちろんそれは他のブラウザやオペレーティングシステムでは役に立ちません。Ajaxアプリケーションでオンライン/オフラインの状態を知ることの重要性を考えると、他のブラウザーベンダーもそのプロパティを提供することを決定すると予測しています。
それが発生するまで、XHRまたはImage()or <img>リクエストのいずれかで、必要な機能に近いものを提供できます。
アップデート（2014/11/16）
主要なブラウザがこのプロパティをサポートするようになりましたが、結果は異なります。
Mozillaドキュメントからの引用：
ChromeとSafariでは、ブラウザーがローカルエリアネットワーク（LAN）またはルーターに接続できない場合、ブラウザーはオフラインです。他のすべての条件が返され
trueます。したがって、false値を返すときにブラウザがオフラインであると想定することはできますが、真の値がブラウザがインターネットにアクセスできることを必ずしも意味するとは限りません。たとえば、コンピューターが常に「接続」されている仮想イーサネットアダプターを備えた仮想化ソフトウェアを実行している場合など、誤検知が発生している可能性があります。したがって、ブラウザのオンラインステータスを本当に確認したい場合は、追加のチェック方法を開発する必要があります。FirefoxおよびInternet Explorerでは、ブラウザーをオフラインモードに切り替えると
false値が送信されます。他のすべての条件はtrue値を返します。
ほぼすべての主要なブラウザは今サポートしてwindow.navigator.onLineプロパティを、対応するonlineとofflineウィンドウのイベント：
window.addEventListener('online', () => console.log('came online'));
window.addEventListener('offline', () => console.log('came offline'));
システムまたはブラウザをオフライン/オンラインモードに設定して、コンソールまたはwindow.navigator.onLineプロパティで値の変更を確認してください。このWebサイトでもテストできます。
ただし、Mozilla Documentationからのこの引用に注意してください。
ChromeとSafariでは、ブラウザーがローカルエリアネットワーク（LAN）またはルーターに接続できない場合、ブラウザーはオフラインです。他のすべての条件が返され
trueます。一方、だから、あなたが想定することができ、それが戻ったときに、ブラウザがオフラインであることfalse価値を、あなたがいると仮定することはできませんtrue値は、必ずしもブラウザがインターネットにアクセスできることを意味します。たとえば、コンピューターが常に「接続」されている仮想イーサネットアダプターを備えた仮想化ソフトウェアを実行している場合など、誤検知が発生している可能性があります。したがって、ブラウザのオンラインステータスを本当に確認したい場合は、チェックするための追加の手段を開発する必要があります。FirefoxおよびInternet Explorerでは、ブラウザーをオフラインモードに切り替えると
false値が送信されます。Firefox 41までは、他のすべての条件がtrue値を返します。Firefox 41以降、OS XとWindowsでは、値は実際のネットワーク接続に従います。
（強調は私自身のものです）
これは、でwindow.navigator.onLineあるfalse（またはofflineイベントを取得する）場合、インターネット接続がないことが保証されることを意味します。
trueただし、それが（またはonlineイベントを取得する）場合は、システムがネットワークに接続されていることを意味します。たとえば、インターネットにアクセスできるという意味ではありません。それを確認するには、他の回答で説明されているソリューションのいずれかを使用する必要があります。
私は当初、これをGrant Wagnerの回答の更新として投稿するつもりでしたが、特に2014年の更新がまだ彼からのものではなかったことを考えると、編集が多すぎるように思われました。
これを行う方法はいくつかあります。
あなたは置くことができるonerrorにimgように、
<img src='http://www.example.com/singlepixel.gif'
onerror='alert("Connection dead");' />
この方法は、ソースイメージが移動または名前変更された場合にも失敗する可能性があり、通常はajaxオプションよりも劣ります。
したがって、これを試行して検出する方法はいくつかありますが、完璧ではありませんが、ブラウザのサンドボックスからジャンプしてユーザーのネット接続ステータスに直接アクセスする機能がない場合は、それらが最良のオプションのようです。
if(navigator.onLine){
alert('online');
} else {
alert('offline');
}
$ .ajax（）のerrorコールバックを使用できます。コールバックは、リクエストが失敗した場合に起動します。場合はtextStatus、文字列「タイムアウト」に等しい、それはおそらく、接続が切断されることを意味します：
function (XMLHttpRequest, textStatus, errorThrown) {
// typically only one of textStatus or errorThrown
// will have info
this; // the options for this ajax request
}ドキュメントから：
エラー：リクエストが失敗した場合に呼び出される関数。関数には3つの引数が渡されます。XMLHttpRequestオブジェクト、発生したエラーのタイプを説明する文字列、およびオプションの例外オブジェクト（発生した場合）です。2番目の引数（null以外）の可能な値は、「timeout」、「error」、「notmodified」、および「parsererror」です。これはAjaxイベントです
だから例えば：
$.ajax({
type: "GET",
url: "keepalive.php",
success: function(msg){
alert("Connection active!")
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
if(textStatus == 'timeout') {
alert('Connection seems dead!');
}
}
});olliejが言ったように、使用したnavigator.onLineブラウザのプロパティがそれに応じて、ネットワーク要求を送信し、より望ましいdeveloper.mozilla.org/En/Online_and_offline_events、それもFirefoxとIEの古いバージョンでサポートされています。
最近、変更に対応する必要がある場合に備えて、WHATWGがonlineおよびofflineイベントの追加を指定していnavigator.onLineます。
また、Daniel Silveiraによって投稿されたリンクにも注意してください。サーバーとの同期をこれらの信号/プロパティに依存することは必ずしも良い考えとは限りません。
window.navigator.onLineあなたが探しているものですが、ここで追加するものはいくつかあります。まず、それがアプリでチェックし続けたいものである場合（たとえば、ユーザーが突然オフラインになったかどうかを確認します。この場合、ほとんどの場合これが修正されます）変更をリッスンする必要もあります）、ウィンドウにイベントリスナーを追加して変更を検出し、ユーザーがオフラインになったかどうかを確認するには、次のようにします。
window.addEventListener("offline",
()=> console.log("No Internet")
);オンラインかどうかを確認するには：
window.addEventListener("online",
()=> console.log("Connected Internet")
);onLineます。ブラウザは、オンライン状態を非常に異なって定義します。developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLineをご覧ください。
私は学校でよく仕事をしている顧客のためにWebアプリ（ajaxベース）を作成する必要がありました。これらの学校はインターネット接続が悪いことがよくあります。この簡単な機能を使用して、接続があるかどうかを検出します。
私はCodeIgniterとJqueryを使用しています：
function checkOnline() {
setTimeout("doOnlineCheck()", 20000);
}
function doOnlineCheck() {
//if the server can be reached it returns 1, other wise it times out
var submitURL = $("#base_path").val() + "index.php/menu/online";
$.ajax({
url : submitURL,
type : "post",
dataType : "msg",
timeout : 5000,
success : function(msg) {
if(msg==1) {
$("#online").addClass("online");
$("#online").removeClass("offline");
} else {
$("#online").addClass("offline");
$("#online").removeClass("online");
}
checkOnline();
},
error : function() {
$("#online").addClass("offline");
$("#online").removeClass("online");
checkOnline();
}
});
}とても簡単な方法だと思います。
var x = confirm("Are you sure you want to submit?");
if (x) {
if (navigator.onLine == true) {
return true;
}
alert('Internet connection is lost');
return false;
}
return false;if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true
インターネットがダウンしているかサーバーがダウンしているかを検出するクライアント側のソリューションを探していました。私が見つけた他のソリューションは、常にサードパーティのスクリプトファイルまたはイメージに依存しているようでしたが、これは時の試練に耐えられるようには思えませんでした。外部でホストされているスクリプトまたは画像が将来変更され、検出コードが失敗する可能性があります。
私は404コードでxhrStatusを探すことでそれを検出する方法を見つけました。さらに、JSONPを使用してCORS制限をバイパスします。404以外のステータスコードは、インターネット接続が機能していないことを示します。
$.ajax({
url: 'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
dataType: 'jsonp',
timeout: 5000,
error: function(xhr) {
if (xhr.status == 404) {
//internet connection working
}
else {
//internet is down (xhr.status == 0)
}
}
});私のやり方。
<!-- the file named "tt.jpg" should exist in the same directory -->
<script>
function testConnection(callBack)
{
document.getElementsByTagName('body')[0].innerHTML +=
'<img id="testImage" style="display: none;" ' +
'src="tt.jpg?' + Math.random() + '" ' +
'onerror="testConnectionCallback(false);" ' +
'onload="testConnectionCallback(true);">';
testConnectionCallback = function(result){
callBack(result);
var element = document.getElementById('testImage');
element.parentNode.removeChild(element);
}
}
</script>
<!-- usage example -->
<script>
function myCallBack(result)
{
alert(result);
}
</script>
<a href=# onclick=testConnection(myCallBack);>Am I online?</a>以下のようないくつかの方法の問題はnavigator.onLine、彼らが一部のブラウザやモバイルバージョンと互換性がないということで、私をたくさん助けたオプションは、古典的な使用していたXMLHttpRequest方法をしても応答して、ファイルがキャッシュに格納された可能性がケースを予知することはXMLHttpRequest.statusより大きく、 200未満、304未満。
これが私のコードです：
var xhr = new XMLHttpRequest();
//index.php is in my web
xhr.open('HEAD', 'index.php', true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
function processRequest(e) {
if (xhr.readyState == 4) {
//If you use a cache storage manager (service worker), it is likely that the
//index.php file will be available even without internet, so do the following validation
if (xhr.status >= 200 && xhr.status < 304) {
console.log('On line!');
} else {
console.log('Offline :(');
}
}
}これには2つの異なるシナリオの2つの答えがあります。
Webサイト（つまり、フロントエンド部分）でJavaScriptを使用している場合、最も簡単な方法は次のとおりです。
<h2>The Navigator Object</h2>
<p>The onLine property returns true if the browser is online:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
</script>
しかし、サーバー側（つまり、ノードなど）でjsを使用している場合、失敗したXHRリクエストを行うことで接続が失われたと判断できます。
標準的なアプローチは、リクエストを数回再試行することです。うまくいかない場合は、接続を確認するようユーザーに警告し、正常に失敗します。
リクエストヘッドインリクエストエラー
$.ajax({
url: /your_url,
type: "POST or GET",
data: your_data,
success: function(result){
//do stuff
},
error: function(xhr, status, error) {
//detect if user is online and avoid the use of async
$.ajax({
type: "HEAD",
url: document.location.pathname,
error: function() {
//user is offline, do stuff
console.log("you are offline");
}
});
}
});ここに私が持っているヘルパーユーティリティのスニペットがあります。これは名前空間付きのJavaScriptです。
network: function() {
var state = navigator.onLine ? "online" : "offline";
return state;
}これをメソッド検出で使用する必要があります。そうでない場合は、これを行う「代替」方法を起動します。必要なのはこれで十分なときが近づいています。他の方法はハックです。