web-dev-qa-db-ja.com

ユーザーがJavaScriptまたは任意のライブラリを使用してオンラインかどうかを確認する方法は？

JavascriptまたはjQueryまたは使用可能なライブラリを使用してインターネット接続を確認する方法について、いくつかの助けが必要です。原因オフラインアプリケーションを開発していて、ユーザーがオフラインの場合はバージョンを表示し、ユーザーがオンラインの場合は別のバージョンを表示したいのです。

今のところ、このコードを使用しています：

if (navigator.onLine) {
    alert('online');
} else {
    alert('offline');
}

しかし、これは検出に非常に時間がかかります。ときどき、インターネットに接続されていないネットワークに接続しているだけで、false（インターネットなし）を警告するのに5〜10秒かかります。

私はOffline.jsライブラリを調べましたが、このライブラリが私の場合に役立つかどうかはわかりません。使い方がわかりません

javascriptjqueryoffline
26
Stranger B.

OFFLINE.js を試してみるべきだと思います。

ページのロード時にすぐに接続をチェックするオプションcheckOnLoadも提供します。

Offline.check（）：接続の現在のステータスを確認します。

Offline.state：接続の現在の状態 'up'または 'down'

試していない場合は、意図したとおりに機能するかどうかを知っておくと便利です。

[〜＃〜] edit [〜＃〜]はコードに少しピークを取り、FAILED XHR REQUEST提案 [〜＃〜] this [〜＃〜] SO質問

9
Doml The-Bread

Mozillaサイト からこのコード機能を取得しました。

window.addEventListener('load', function(e) {
  if (navigator.onLine) {
    console.log('We\'re online!');
  } else {
    console.log('We\'re offline...');
  }
}, false);

window.addEventListener('online', function(e) {
  console.log('And we\'re back :).');
}, false);

window.addEventListener('offline', function(e) {
  console.log('Connection is down.');
}, false);

リンクが機能することを確認するためのリンク もあります。 IE、Firefox、Chromeで試してみました。 Chromeは最も遅いように見えましたが、それは約0.5秒でした。

9
Jamie Barker

見てみましょう インターネット接続がオフラインであることを検出しますか？ 基本的に、起動している可能性が高いと思われるもの（google.comなど）にajaxリクエストを送信し、失敗した場合はインターネット接続がありません。 。

4
dmeglio

WebRTCを利用してみてください。 diafygi/webrtc-ips を参照してください。ある程度

さらに、これらのSTUNリクエストは通常​​のXMLHttpRequestプロシージャの外で行われるため、開発者コンソールに表示されないか、AdBlockPlusやGhosteryなどのプラグインによってブロックされる可能性があります。これにより、広告主がワイルドカードドメインを使用してSTUNサーバーを設定した場合、これらのタイプのリクエストをオンライントラッキングで使用できるようになります。

consoleで「オンライン」または「オフライン」をログに記録するよう最小限に変更

// https://github.com/diafygi/webrtc-ips
function online(callback){

    //compatibility for firefox and chrome
    var RTCPeerConnection = window.RTCPeerConnection
        || window.mozRTCPeerConnection
        || window.webkitRTCPeerConnection;
    var useWebKit = !!window.webkitRTCPeerConnection;

    //bypass naive webrtc blocking using an iframe
    if(!RTCPeerConnection) {
        //NOTE: you need to have an iframe in the page
        // right above the script tag
        //
        //<iframe id="iframe" sandbox="allow-same-Origin" style="display: none"></iframe>
        //<script>...getIPs called in here...
        //
        var win = iframe.contentWindow;
        RTCPeerConnection = win.RTCPeerConnection
            || win.mozRTCPeerConnection
            || win.webkitRTCPeerConnection;
        useWebKit = !!win.webkitRTCPeerConnection;
    }

    //minimal requirements for data connection
    var mediaConstraints = {
        optional: [{RtpDataChannels: true}]
    };

    //firefox already has a default stun server in about:config
    //    media.peerconnection.default_iceservers =
    //    [{"url": "stun:stun.services.mozilla.com"}]
    var servers = undefined;

    //add same stun server for chrome
    if(useWebKit)
        servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};

    //construct a new RTCPeerConnection
    var pc = new RTCPeerConnection(servers, mediaConstraints);

    //create a bogus data channel
    pc.createDataChannel("");

    var fn = function() {};

    //create an offer sdp
    pc.createOffer(function(result){

        //trigger the stun server request
        pc.setLocalDescription(result, fn, fn);

    }, fn);

    //wait for a while to let everything done
    setTimeout(function(){
        //read candidate info from local description
        var lines = pc.localDescription.sdp.split("\n");
        // return `true`:"online" , or `false`:"offline"
        var res = lines.some(function(line) {
          return line.indexOf("a=candidate") === 0
        });
        callback(res);
    }, 500);
}

//Test: Print "online" or "offline" into the console
online(function(connection) {
  if (connection) {
    console.log("online")
  } else {
    console.log("offline")
  }
});
2
guest271314

navigator.onLineは、true/false値（オンラインの場合はtrue、オフラインの場合はfalse）を維持するプロパティです。このプロパティは、ユーザーが「オフラインモード」に切り替えるたびに更新されます。

window.addEventListener('load', function() {

  function updateOnlineStatus(event) {
     document.body.setAttribute("data-online", navigator.onLine);
  }
  updateOnlineStatus();
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});
2
Selva kumar

私の解決策は、非常に小さい画像（1x1）、キャッシュされない、および常にオンラインを取得することです。

<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>

ノート：

  • jQueryの-​​ローカルコピーを使用してください。そうしないと機能しませんoffLine。

  • コードをテストしましたonLine/offLineと動作します遅延なし。

  • デスクトップまたはモバイルのすべてのブラウザーで動作します。

  • ご参考までに、引数を使用していないため、Google Analyticsからの追跡はありません。

  • 画像を自由に変更してください。キャッシュされず、サイズが小さいことを確認してください。

2
Pedro Lobito

新しいFetch APIを使用すると、ネットワークが存在しない場合にほぼ即座にエラーがトリガーされます。

これの問題は、現時点でFetch APIが乳児のサポートを持っていることです（現在Chromeが安定した実装、FirefoxとOperaが導入され、IEはサポートしていません）。フェッチの原則をサポートするためにpolyfillが存在しますが、純粋な実装の場合のように必ずしも迅速に戻る必要はありません。一方、オフラインアプリには最新のブラウザが必要です...

CORS要件を回避するためにHTTPS経由でプレーンテキストファイルを読み込もうとする例（リンクはランダムに選択されます。テストする小さなテキストファイルをサーバーに設定する必要があります-今のところChromeでテストしてください）：

fetch("https://link.to/some/testfile")
    .then(function(response) {
        if (response.status !== 200) {  // add more checks here, ie. 30x etc.
            alert("Not available");     // could be server errors
        }
        else
            alert("OK");
    })
    .catch(function(err) {
        alert("No network");           // likely network errors (incl. no connection)
    });

別のオプションは、Service workerを設定し、そこからフェッチを使用することです。これにより、リクエストされたページが利用できない場合に、オプション/カスタムのオフラインページまたはキャッシュページを提供できます。また、これは非常に新しいAPIです。

1
user1693593

MS Webテクノロジーを使用して開発している場合は、SignalRを使用できます。 SignalRは、サーバー/クライアントブラウザーテクノロジーに応じて、開発者に対して透過的なロングポーリングまたはWebソケットを確立します。サイトへのアクティブな接続があるかどうかを判断する以外に何も使用する必要はありません。

SignalRが何らかの理由で切断した場合、SignalRサーバーインスタンスが実際にサイトにインストールされている限り、サイトへの接続が失われています。したがって、クライアントで$ .connection.hub.disconnected（）イベント/メソッドを使用して、接続ステータスを保持するグローバル変数を設定できます。

SignalRと、接続状態を判別するためのSignalRの使用方法については、こちらをご覧ください... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events #clientdisconnect

1
Justin Russo
// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
    var xhr = new XMLHttpRequest();
    var file = "http://www.yoursite.com/somefile.png";
    var randomNum = Math.round(Math.random() * 10000);

    xhr.open('HEAD', file + "?rand=" + randomNum, false);

    try {
        xhr.send();

        if (xhr.status >= 200 && xhr.status < 304) {
            return true;
        } else {
            return false;
        }
    } catch (e) {
        return false;
    }
}
1
Teo Dragovic

を参照してくださいHTML5/JavaScriptを使用して接続タイプ（WiFi/LAN/WWAN）を確認するにはどうすればよいですか？回答：

1
falsarella