Firefox + HTML5でオフラインに対応させる3つの方法

後藤大地　 [2010/01/19]

Firefox web browser - Faster, more secure & customizable

offline web applications at hacks.mozilla.orgにおいてFirefoxおよびHTML5を使ってWebアプリケーションをオフライン対応にする方法がまとめられている。オフラインを実現するための3つのポイントと、動作を紹介する簡潔なサンプルが掲載されており参考になる。紹介されている3つのポイントは次のとおり。

データをローカルストレージを保持する

FirefoxではFirefox 2からDOM storageが導入され、ブラウザセッションを越えて、またはタブやウィンドウを越えてのデータ共有が可能になっている。ストレージグローバルオブジェクトにはページを表示している間やリロードを越えて保持される「sessionStorage」と、ブラウザが起動している間保持し続けられる「localStorage」のふたつがある。Webアプリケーションをオフライン対応にする場合、必要になるデータをlocalStorageを経由して保持するようにする。データは文字列として保持可能。localStorageはホスト(スキーマ+ホスト名+非標準ポート)ごとに生成される。

Strageインタフェース	内容
long length	保持しているアイテムの数
string key(long index)	インデックスのキー名を取得
string getItem(string key)	キーに関連する値を取得
void setItem(string key, string data)	キーと値を追加
void removeItem(string key)	キーと値を削除
void clear()	ストレージをクリア

キャッシュマニフェストにオフラインリソースを列挙する

オフライン時の動作に必要になるリソースはキャッシュマニフェストに列挙しておく。キャッシュマニフェストの記載がある場合、Firefoxはユーザに最初の読み込み時にデータをオフライン目的で保存していいか確認を促すようになる。ユーザが許可した場合、リソースはローカルにキャッシュされるようになる。

<html manifest="http://www.foo.com/cache-manifest">
  ...
</html>
キャッシュマニフェストの指定例 - Offline resources in Firefoxより抜粋

オンラインおよびオフラインの変更を監視する

現在オンライン状態にあるかオフライン状態にあるかは「navigator.onLine」プロパティでチェックできる。またオフラインおよびオンラインの変更はwindowのonlineおよびofflineイベントを使って通知を受けることが可能。これを利用してオンライン状態、オフライン状態に対応した動作をするようにアプリケーションを組み上げる。

function whatIsYourCurrentStatus() {
  var status = window.prompt("What is your current status?");
  if (!status) return;
  if (navigator.onLine) {
    sendToServer(status);
  } else {
    saveStatusLocally(status);
  }
}

function sendLocalStatus() {
  var status = readStatus();
  if (status) {
    sendToServer(status);
    window.localStorage.removeItem("status");
  }
}

window.addEventListener("load", function() {
   if (navigator.onLine) {
     sendLocalStatus();
   }
}, true);

window.addEventListener("online", function() {
  sendLocalStatus();
}, true);

window.addEventListener("offline", function() {
  alert("You're now offline. If you update your status, it will be sent when you go back online");
}, true);
navigator.onLine、online、offlineの利用例 - offline web applicationsより抜粋

offline web applicationsでは最終的にWebアプリケーションをオフラインに対応させる場合の要点として、まず入力値をlocalStorageに保持すること、マニフェストファイルを作成すること、イベントを通じて接続状況をモニタリングすることとまとめている。