1

java/servletと フロントエンドを使用して Web アプリケーションを開発していますJSP。

マイページには、ユーザー向けの情報が表示されます。

ネットワーク接続がアクティブかどうか (オン/オフ) を確認し、すべてのブラウザーとデバイスをサポートする適切な方法はありますか?

ネットワークがダウンした場合、適切なメッセージで他のページにリダイレクトしたいと思います。

の使用について読みましたnavigator.onLineが、すべてのブラウザーでサポートされているわけではなく、間違った結果が得られることもあります。

4

2 に答える 2

1

Web アプリの接続が機能しているかどうかを確認する唯一の正しい方法は、リモート サービスを呼び出して応答を待つことです。リクエストが失敗またはタイムアウトした場合は、接続がないと見なすことができます。

ナビゲーター API の問題点は、デバイスが最初のレベル (ルーターや LAN など) に接続されている場合にのみ通知され、実際にインターネットに接続されていないことです。

非常に簡単に言えば、次の行に沿った何かがうまくいくでしょう...

var appConnected = false;

function checkConnection() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.timeout = 1000 //Miliseconds - Set this to whatever you feel appropriate for your app
    xmlHttp.open('GET', 'http://yourdomain.com/1x1.gif', true);

    xmlHttp.onreadystatechange = function () {
        switch (xmlHttp.readyState) {
            case 4:
                var r = xmlHttp.responseText;

                if ( xmlHttp.status === 200 )  {
                    appConnected = true;
                } else {
                    appConnected = false;
                }
                break;
            default:
                appConnected = false;
        }
    };
}

var intervalID = window.setInterval(checkConnection, 5000);

これは 5 秒ごとに実行されます。特定のユース ケースによっては、それほど効率的ではない場合があります。ユーザーのデータと帯域幅を考慮することを忘れないでください。

接続ステータスのポーリングが完了したら、間隔をクリアします...

clearInterval(nIntervId);

他のオプションは、HTML5 アプリ キャッシュでフォールバック オプションを使用することです。ただし、古いデバイスをターゲットにしている場合、これは不可能な場合があります。

于 2013-09-17T15:48:17.737 に答える
1

ほとんどのブラウザーには、このためのネイティブ プロパティがあります: navigator.onLine。ただし、現在、この実装はブラウザーによって大きく異なるため、実際の状況で使用することは非常に困難です。

これを念頭に置いて、次の JavaScript 関数を使用して、ページが Web に接続されているかどうかを確認します。非常にシンプルで、クロスブラウザーで動作するはずです。サーバーから画像をロードしようとし、発生したエラーをキャッチすることで機能します。

var isOnline = true;

function onlineCheck(){
    var testImg = new Image(); 
    testImg.onerror = function(){
        isOnline = false
        alert("Web access is unavailable. Please check that you are connected to the internet.")
    }
    testImg.onload = function(){ isOnline = true; }
    testImg.src = "https://www.google.ie/images/srpr/logo4w.png"; //replace this with an image on your site
}

サイトの を 1x1 ピクセルの画像に変更するtestImg.srcことをお勧めします。ドメインへの接続はすでに開いている可能性が高いため、これは読み込みが速くなります。実際の画像を作成してアップロードするよりも数行のコードを実装する方が簡単なため、私は通常、この目的のために動的に生成された画像を使用します。これを試してみたい場合に備えて、1x1 ピクセルの画像を作成するために使用する PHP コードを含めました。これを JSP に簡単に適応させることができます。

        header(  "Content-type:  image/gif"); 
        header("Cache-Control: no-cache"); 
        header("Cache-Control: must-revalidate"); 
        printf ("%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c%c",71,73,70,56,57,97,1,0,1,0,128,255,0,192,192,192,0,0,0,33,249,4,1,0,0,0,0,44,0,0,0,0,1,0,1,0,0,2,2,68,1,0,59);
        exit();
于 2013-09-17T15:25:13.163 に答える