HTML5 - オフラインWebアプリケーション

トップ > HTML5 > オフラインWebアプリケーション
このページで紹介している Offline Web Application は、現在ではあまり使用されていません。代わりに Service Worker が使用されています。

オフラインWebアプリケーションとは

オフラインWebアプリケーション(Offline Web Applications)は、HTML, CSS, JavaScript, 画像等のファイルをパソコンや端末側にキャッシュさせておき、ネットに接続されていないオフライン状態でも、Web アプリケーションの実行を可能にする技術です。下記の文書で仕様が検討されています。

下記のブラウザでサポートされています。

サンプル

実際のサンプルがこちらです。2つの数字を合計して結果を表示する Webアプリケーションです。LANケーブルを PC から抜くなどして、ネットに接続できない状態でも、利用することができます。

作成方法

下記の 4つのファイルを作成します。

offline_sample.html はごく普通のHTMLファイルですが、htmlタグに manifest="offline_sample.manifest" 属性を追記します。

offline_sample.html
<!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で)記述します。

offline_sample.manifest
CACHE MANIFEST
# Version 1.1
CACHE:
offline_sample.html
offline_sample.js

offline_sample.js は、ごく普通のJavaScriptファイルです。

offline_sample.js
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サーバの管理者に相談してください。

.htaccess
AddType text/cache-manifest .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文字書き換えます。この場合、下記のブラウザ動作によって更新ファイルが再ダウンロードされます。

ブラウザ毎の関連操作

◆ キャッシュの確認
◆ キャッシュの削除
◆ オンラインモード、オフラインモードの切り替え

API

navigator オブジェクトの onLine 属性で、現在オンラインか否かを判断することができます。実際にネットに接続しているかではなく、ブラウザが [オフラインモード] に切り替えられているか否かを判断します。

JavaScript
if (navigator.onLine == true) {
    alert("On line!");
} else {
    alert("Off line");
}

bodyオブジェクト等に、online, offlineイベントを設定できるようになりました。

JavaScript
document.body.addEventListener("online", function() {
    alert("オンラインに切り替わりました");
});
document.body.addEventListener("offline", function() {
    alert("オフラインに切り替わりました");
});

ローカルストレージアクセスと組み合わせることで、オフライン作業中のデータをローカルストレージに保存することができます。

JavaScript
localStorage["sampleData"] = "Sample Data";

リンク


Copyright (C) 2012 杜甫々
初版:2012年5月6日、最終更新:2012年5月6日
http://www.tohoho-web.com/html5/offline.html