[実用HTML5API]オンライン/オフラインの判断


前回までは、どちらかという Web コンテンツの表示速度の向上という観点で、ローカルストレージや、Application Cahe について紹介しました。

これらの機能は、クライアントのローカルに情報を保持しますので、オフラインでの利用も可能です。

オンラインであれば、Web サーバーの情報を参照し、オフラインであればローカルにキャッシュされた情報を使用するといったことが可能になります。

それでは、現在コンピューターがオンラインであるかオフラインであるかを確認するにはどうすれば良いでしょう?

 

オンライン/オフラインの判断

HTML5 では、window.navigator オブジェクトの onLine プロパティの値が真か偽かによって、Web ブラウザーがネットワークに接続された状態かどうか判断することができます。

具体的には以下のようなコードで判断することができます。

if (navigator.onLine) 
     alert(“オンラインですよ”); 
else 
    alert(“つながってないみたいですね”);

(※) コードの実行を確認するには、PC のネットワークケーブルを抜き、無線 LAN も OFF にした状態でお試しください。

 

navigator オブジェクト onLine プロパティの謎と真相

この window.navigator オブジェクトの onLine プロパティは、「HTML5 からサポート」、となっていますが、じつは Internet Explorer では IE4 からサポートされていました。

ただし、旧い Internet Explorer の navigator オブジェクトの onLine プロパティが返す真偽は、Internet Explorerのメニュー [ファイル]内の [オフライン作業] にチェックが入っているかどうかを示すものであり、実際にネットワークに接続されているかどうかを調べることはできませんでした。

image

この仕様は Internet Explorer 9 では変更になっており、IE9 では window.navigator オブジェクトの onLine プロパティを使用して、Web ブラウザーがネットに接続されているかどうかを調べることができるようになっています。

ただし、メニュー [ファイル] – [オフラインの作業] にチェックがついている場合は、 Internet Explorer がオフラインとなるので false を返します。

 

RSS フィードリストをオフライン利用するサンプル

navigator オブジェクトの onLine プロパティの説明だけだと、少し記事としてさみしいので、RSS をフィードリストをローカルストレージにキャッシュし、オフライン時にそれを使用するサンプルを作ってみました。

<p><input id=”rssBtn” value=”Read RSS” type=”button” /></p>
<div id=”msgDiv”></div>
<ul id=”feedList”></ul>
<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js”></script>
<script type=”text/javascript”>// <![CDATA[ 
(function () {

     window.addEventListener(“load”, function () { 
          document.getElementById(“rssBtn”).addEventListener(“click”, readRSS, false); 
      }, false);

 

//フィードリストを描画
function renderRSS(xml) { 
     $(xml).find(‘item’).each(function () { 
          var title = $(this).find(‘title’).text(); 
          var url = $(this).find(‘link’).text(); 
          $(‘<li></li>’).html(‘<a href=”‘ + url + ‘” target=”_blank”>’
              + title + ‘</a>’).appendTo(‘ul#feedList’); 
       });
       //ローカルストレージに feedList の内容を保存 
       window.localStorage[“feedList”] = document.getElementById(“feedList”).innerHTML; 
       var msgDiv = document.getElementById(“msgDiv”); 
       msgDiv.style.color = “blue”; 
       msgDiv.innerText = “オンラインから情報を取得しました。”; 
}

//RSS を取得 
function readRSS() { 
     //オンラインかオフラインか判断 
     if (!window.navigator.onLine) { 
          if (window.localStorage.feedList) { 
               //ローカルストレージの内容をロード 
               document.getElementById(“feedList”).innerHTML = window.localStorage[“feedList”];
               msgDiv.style.color = “red”; 
               msgDiv.innerText = “オフラインのためローカルストレージの情報を使用しました。”; 
           } 
           else { 
                alert(“まだローカルストレージにキャッシュがありません。一旦、オンラインで実行してください”); 
           } 
      } 
     else { 
          $.ajax({ 
               //※ドメインの違う(クロスドメイン) RSS は読めないので注意 
               url: “http://blogs.msdn.com/b/osamum/rss.aspx”
               cache: false, 
               dataType: “xml”, 
               success: function (xml) { 
                    renderRSS(xml); 
               } 
           }); 
     } 
}

})()
// ]]></script>

このサンプルでは、RSS フィードリストの内容をローカルストレージに保持しますので、一旦、オンラインで RSS フィードリストを読みこんでおけば、Web ブラウザーを再起動してもその情報を使用することができます。

また、オンラインの場合は、ローカルストレージの内容を更新します。

 

実際に、このページに上記コードを実装しましたので、オンラインの状態で一度、以下のボタンをクリックし、次に、ネットワークケーブルを抜く/無線LAN をオフにして再度、以下のボタンをクリックし、[ステータス] の内容が変更されるのを確認してください。

[ステータス]

    まとめ

    HTML5 では今回紹介したようにオンライン/オフラインの判断をはじめ、Web ブラウザーローカルへの情報の保持など、オフラインアプリケーションの作成も不可能ではなくなっています。

    これらを利用して、ネットワーク接続にとらわれないケンシロウ、ちがった、堅牢なアプリケーションを作成いただければと思います。

     

    おしらせ

    私の所属している UX & クライアントプラットフォーム推進部では、Windows 8 及びWindows Phone における Metro Style アプリケーションの開発を推進、支援する“Go Metro”というのをやってますので、ぜひご活用を。

    clip_image002

    http://www.facebook.com/5Metro

     

    <pReal Time Analytics

    Clicky

    Comments (0)

    Skip to main content