ここではToDoアプリを例にざっくり説明。
アプリケーションキャッシュ（Application Cahche）
オフラインでも動作するWEBアプリを作成するには、キャッシュしたいファイルを「マニフェスト」というファイルに列挙するだけです。
todo.appcache
CACHE MANIFEST # Version 1.0 CACHE: # キャッシュするファイル index.htm js/todo.js NETWORK: # キャッシュしないファイル
このマニフェストファイルは「CACHE」と「NETWORK」という２つのセクションで構成されていて、コメントにも書いてますがそれぞれキャッシュするファイル、キャッシュしないファイルを記述していきます。
また、このマニフェストファイルですがMIMEタイプが「text/cache-minifest」として出力される必要がありますので使っているWEBサーバに合わせてMIMEタイプを追加して下さい。
Apacheサーバ＋.htaccess
AddType text/cache-manifest .appcache
HTML
HTMLで注意する点は２つ。
まずHTML5なので<!DOCTYPE html>を宣言すること。
もう１つは上で作成したマニフェストファイルをhtmlタグのmanifest属性で指定すること。
これくらいです。
index.htm
<!DOCTYPE HTML>
<html lang="ja-JP" manifest="todo.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>オフラインTODO</title>
<script type="text/javascript" src="./js/todo.js"></script>
</head>
<body>
<div>
TODO：
<input type="text" id="newItem" style="width:50%;" />
<button onclick="addTodo();">追加</button>
</div>
<p id="todo"></p>
</body>
</html>
マニフェストファイルの参照がうまくいってればこれだけでオフラインのWEBアプリの完成です。（JSがまだないから動きはしませんが）
スマートフォンとかで試す場合は、機内モードとかにすると確認することができます。
ネットワークが繋がってない状態でも更新！としてちゃんとページが表示されます。
Javascript
Javascriptではウェブストレージ機能を使ってローカルストレージに内容を保存する機能を実装していきます。
また、合わせてキャッシュの更新を通知するような仕組みも実装します。
js/todo.js
var pre = "TodoApp."; // WebStorageのプリフィックス
var ls = window.localStorage;
// Todoを追加する
function addTodo() {
var i = 0;
if (ls[pre + "count"]) i = parseInt(ls[pre + "count"]);
ls[pre + "item" + i] = $("newItem").value;
$("newItem").value = "";
ls[pre + "count"] = (i + 1);
updateList();
}
// Todoを削除する
function rmTodo(no) {
ls.removeItem(pre + "item" + no);
updateList();
}
// Todo一覧を更新する
function updateList() {
var src = "";
var count = 0;
if (ls[pre + "count"]) count = parseInt(ls[pre + "count"]);
for (var i = 0; i < count; i++) {
if (ls[pre + "item" + i]) {
var btn = "<button onclick='rmTodo(" + i + ");'>×</button>";
src += "<div>" + btn + ls[pre + "item" + i] + "</div>";
}
}
$("todo").innerHTML = src;
}
function $(id) {
return document.getElementById(id);
}
// ロード時
window.onload = function() {
var appCache = window.applicationCache;
// マニフェストの更新を通知する
appCache.addEventListener("updateready", function() {
if (confirm("最新版に更新しますか？")) {
appCache.swapCache();
location.reload();
}
});
updateList();
}
まず、ローカルストレージの使い方ですが簡単です。
// 値を書き込む場合
localStorage["key"] = "value";
// 値を取得する場合
var value = localStorage["key"];
// 値を削除する場合
localStorage.remoteItem("key");
クッキーに似てますがローカルストレージは永続的にデータが保持されるのでけっこう使えます。
つぎにマニフェストの更新の通知です。
アプリケーションキャッシュを操作するAPIを利用するには、window.applicationCacheオブジェクトを利用します。
このオブジェクトのイベントリスナーに「updateready」を登録することで、キャッシュの更新が可能なタイミングでアラートを表示することができます。
そこで、swapCache()メソッドを呼び出すことでキャッシュを更新することができます。
あいかわらずざっくりした説明ですが、これでオフラインWEBアプリの完成です。
0 件のコメント:
コメントを投稿