高度なプログラム設計(第3版)第23章オフラインアプリケーションとクライアントストレージ/ノート

18247 ワード

オフラインアプリケーションとクライアントストレージ
オフライン検出
  • オフラインアプリケーションを開発する第一歩は、デバイスがオンラインであるか、オフラインであるかを知ることである.
  • navigator.onLineプロパティ、プロパティ値trueはデバイスがインターネットに接続できることを示し、値falseはデバイスがオフラインであることを示します.
  • HTML 5では、onlineとofflineの2つのイベントも定義されています.
  • ネットワークがオフラインからオンラインへ、またはオンラインからオフラインへと変化するときに、これら2つのイベント
  • がそれぞれトリガーされる.
    EventUtil.addHandler(window, "online", function(){  alert("Online"); }); EventUtil.addHandler(window, "offline", function(){  alert("Offline"); }); //          ,      ,     navigator.onLine        。 //  ,                        。

     
    キャッシュの適用
  • アプリケーションキャッシュ(Appcache)は、ブラウザのキャッシュから分割するキャッシュ領域
  • である.
  • このキャッシュにデータを保存するには、記述ファイル
  • を使用します.
  • 記述ファイルをページに関連付けるには、のmanifestプロパティでこのファイルのパス
  • を指定します.
    //      
    CACHE MANIFEST #Comment  file.js file.css //     //     <html manifest="/offline.manifest"> 

     
  • APIのコアは、アプリケーション・キャッシュの次の現在の状態を示すstatus属性であり、値は定数である.

  • 0:キャッシュなし、すなわちページに関連するアプリケーションキャッシュがない.
    1:アプリケーションキャッシュが更新されていないアイドル状態.
    2:確認中、すなわち記述ファイルをダウンロードし、更新を確認している.
    3:ダウンロード中、すなわちアプリケーションキャッシュが記述ファイルに指定されたリソースをダウンロードしている.
    4:更新が完了した.すなわち、アプリケーションキャッシュがリソースを更新し、すべてのリソースがダウンロード済みであり、swapCache()で使用できるようになった.
    5:廃棄、すなわちアプリケーションキャッシュの記述ファイルが既に存在しないため、ページはアプリケーションキャッシュに再アクセスできない.
  • アプリケーションキャッシュには、ステータスの変化を示す関連イベントがたくさんあります.以下はこれらのイベントです.

  • checking:ブラウザがアプリケーションキャッシュの更新を検索するときにトリガーされます.
    error:更新またはダウンロードリソースの確認中にエラーが発生した場合にトリガーされます.
    noupdate:記述ファイルをチェックしてファイルに変化がないことを発見したときにトリガーします.
    downloading:アプリケーションキャッシュリソースのダウンロードを開始するとトリガーされます.
    progress:ファイルダウンロードアプリケーションキャッシュ中に継続的にトリガーされます.
    updateready:ページの新しいアプリケーションキャッシュのダウンロードが完了し、swapCache()の使用時にトリガーできます.
    cached:アプリケーションキャッシュが完全に使用可能である場合にトリガーされます.
  • 一般的に、これらのイベントは、ページのロードに伴って上記の順序で順次トリガーされる.
  • ただし、update()メソッドを呼び出すことで手動で介入し、アプリケーションキャッシュに更新をチェックするために上記イベントをトリガーさせることもできる.
  • applicationCache.update(); 
    //update()    ,                 (   checking   ), //            ,        

     
    データストア
  • Cookie

  • このHTTPレスポンスは、nameを名前とし、valueを値とするクッキーを設定します.
  • 制限
  • cookieは、特定のドメイン名に性質的にバインドされている.
  • cookieはクライアントコンピュータ上に存在し、各ドメインのcookie総数は限られた
  • である.
  • 単一ドメイン名の制限を超えた後にクッキーを設定すると、ブラウザは以前に設定したクッキー
  • を消去する.
  • クッキーの構成
  • 名:クッキーを一意に特定する名前.
  • cookie名は大文字と小文字を区別せず、名称は転送時にURL符号化の
  • でなければならない.
  • 値:クッキーに格納された文字列値.値はURLでエンコードする必要があります.
  • ドメイン:クッキーはどのドメインに対して有効ですか.
  • パス:指定されたドメイン内のパスに対して、クッキー
  • をサーバに送信すべきである.
  • 失効時間:クッキーがいつ削除されるべきかを示すタイムスタンプ
  • デフォルトでは、ブラウザセッションの終了時にすべてのクッキーが削除されます.ただし、自分で削除時間を設定することもできます.
  • セキュリティフラグ:指定後、クッキーはSSL接続を使用している場合にのみサーバに送信されます.
  • JavaScriptのクッキー
  • jsにおけるクッキーの処理は、よく知られている下手なインタフェース、すなわちBOMのdocumentのため、複雑である.クッキー属性
  • の基本的なクッキー操作には、読み取り、書き込み、削除の3つがあります.CookieUtilオブジェクトには、次のように
  • が表示されます.
    var socket = new WebSocket("ws://www.example.com/server.php"); var CookieUtil = {  get:function(name){  var cookieName = encodeURIComponent(name) + "=" ,  cookieStart = document.cookie.indexOf(cookieName),  cookieValue = null;   if(cookieStart > -1){  var cookieEnd = document.cookie.indexOf(";",cookieStart);  if(cookieEnd == -1){  cookieEnd = document.cookie.length;  }  cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));  }   return cookieValue;  },  set:function(name,value,expires,path,domain,secure){  var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);   if(expires instanceof Date){  cookieText += "; expires=" + expires.toGMTString();  }  if(path){  cookieText += "; path=" + path;  }  if(domain){  cookieText =+ "; domain=" + domain;  }  if(secure){  cookieText += "; secure=" + secure;  }  document.cookie = cookieText;  },  unset:function(name,path,domain,secure){  this.set(name,"",new Date(0),path,