オフラインWebアプリケーション(Offline Web Applications)は、HTML, CSS, JavaScript, 画像等のファイルをパソコンや端末側にキャッシュさせておき、ネットに接続されていないオフライン状態でも、Web アプリケーションの実行を可能にする技術です。下記の文書で仕様が検討されています。
下記のブラウザでサポートされています。
実際のサンプルがこちらです。2つの数字を合計して結果を表示する Webアプリケーションです。LANケーブルを PC から抜くなどして、ネットに接続できない状態でも、利用することができます。
下記の 4つのファイルを作成します。
offline_sample.html はごく普通のHTMLファイルですが、htmlタグに manifest="offline_sample.manifest" 属性を追記します。
<!DOCTYPE html>
<html manifest="offline_sample.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Offline Web Application Sample</title>
<script src="offline_sample.js"></script>
</head>
<body onload="showVersion()">
<h1>オフラインWebアプリケーションサンプル</h1>
<hr>
<p>簡単な足し算を行います。</p>
<input id="x" type="text" value="5"> ＋
<input id="y" type="text" value="6">
<button onclick="doCalc()">＝</button>
<input id="z" type="text">
<hr>
</body>
</html>
offline_sample.manifest にはオフライン状態に備えてキャッシュさせたいファイルなどを(UTF-8で)記述します。
CACHE MANIFEST # Version 1.1 CACHE: offline_sample.html offline_sample.js
offline_sample.js は、ごく普通のJavaScriptファイルです。
function doCalc() {
var x = document.getElementById('x');
var y = document.getElementById('y');
var z = document.getElementById('z');
z.value = Number(x.value) + Number(y.value);
}
*.manifest ファイルのタイプを text/cache-manifest に設定するため、.htaccess に下記を記載します。アップロード先のフォルダにすでに .htaccess ファイルが存在する場合は、その末尾に追記してください。.htaccess が許可されていない場合は、httpd.conf ファイルに追記します。Webサーバが Apache で無い場合や、設定の権限が無い場合は、Webサーバの管理者に相談してください。
AddType text/cache-manifest .manifest
Manifestファイルのサンプルを下記に示します。
CACHE MANIFEST # V1.1 CACHE: index.html js/sample1.js js/sample2.js css/sample1.css css/sample2.css img/sample1.gif img/sample2.gif NETWORK: cgi/sample1.cgi cgi/sample2.cgi api/sample1.php api/sample2.php FALLBACK: error.html
| キーワード | 説明 |
|---|---|
| CACHE MANIFEST | このファイルがキャッシュマニフェストであることを宣言します。必ずファイルの1行目に記述しなくてはなりません。 |
| # コメント... | # で始まる行はコメントです。アプリケーションを更新するために、バージョン番号を記載しておくのが通例です。 |
| CACHE: | CACHEセクションとして、キャッシュさせたいURLの一覧を記述します。CACHEセクションは省略できませんが、CACHEがデフォルトセクションのため、CACHE:キーワードは省略可能です。 |
| NETWORK: | NETWORKセクションとして、キャッシュせず、常にサーバにアクセスすべきURLの一覧を記述します。NETWORKセクションは省略可能です。 |
| FALLBACK: | FALLBACKセクションとして、キャッシュが存在しない場合に代替として表示するファイルを記述します。FALLBACKセクションは省略可能です。 |
アプリケーションを更新した際は、更新したファイルをアップロードすると共に、Manifestファイルに対しても、コメントのバージョン番号などを1文字書き換えます。この場合、下記のブラウザ動作によって更新ファイルが再ダウンロードされます。
navigator オブジェクトの onLine 属性で、現在オンラインか否かを判断することができます。実際にネットに接続しているかではなく、ブラウザが [オフラインモード] に切り替えられているか否かを判断します。
if (navigator.onLine == true) {
alert("On line!");
} else {
alert("Off line");
}
bodyオブジェクト等に、online, offlineイベントを設定できるようになりました。
document.body.addEventListener("online", function() {
alert("オンラインに切り替わりました");
});
document.body.addEventListener("offline", function() {
alert("オフラインに切り替わりました");
});
ローカルストレージアクセスと組み合わせることで、オフライン作業中のデータをローカルストレージに保存することができます。
localStorage["sampleData"] = "Sample Data";