HTML5 - オフラインwebアプルサンプル

オフライン機能を持つwebappを作成してみる。

・オフライン機能を持つindex.html、online.js、offline.jsを作成する

index.html

<!DOCTYPE html>
<html manifest="index.manifest">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title> topページ </title>
   <script type="text/javascript" src="online.js">
   </script>
</head>
<body>
<img src="logo.jpg" alt="logo"/>
<input id="bn" type="button" value="送信"/>
</body>
</html>

online.js

window.onload = function()
{
    document.getElementById("bn").onclick = function() {
        alert("オンラインです！！");
    };
};

offline.js

window.onload = function()
{
    document.getElementById("bn").onclick = function() {
        alert("オフラインです！！");
    };
};

・index.manifestファイルを作成する

CACHE MANIFEST
#一行目はCACHE MANIFEST固定
#ファイルバージョン
#version 1
#CACHEの後は、キャッシュするリソース
CACHE:
index.html
logo.jpg
#NETWORKの後はキャッシュしないリソース
NETWORK:
*
#FALLBACK:行毎に二つのリソースを記述する
#一個目 : オフライン時のリソース
#二個目 : オンライン時のリソース
FALLBACK:
online.js offline.js

・tomcatにindex.manifestファイルを認識させるため、tomcatのweb.xmlに下記を追加する

<mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

・動作確認

サーバを起動し、index.htmlをリクエストし、ボタンクリック　⇒ オンライン
サーバを停止し、index.htmlをリクエストし、ボタンクリック　⇒ オフライン

※ブラウザのon/offの状態確認する方法

navigator.onLine属性
online/offlineイベント

・applicationCacheオブジェクトを使い、オフラインキャッシュを制御する

applicationCacheの属性

UNCACHED : オフライン起動未起動
IDEL : 暇
CHECKING : manifestの相違チェック中
DOWNLOADING : 必要なキャッシュダウンロード中
UPDATEREADY : キャッシュ対象ダウンロード完了、ローカル更新未完了
OBSOLETE : 期限切れ

applicationCacheのメソッド - update() : サーバ上のmanifestファイルが更新されているかをチェック - swapCache() : ローカルのキャッシュを更新する

・index.htmlを修正する

<!DOCTYPE html>
<html manifest="index.manifest">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title> topページ </title>
   <script type="text/javascript" src="online.js">
   </script>
   <script type="text/javascript" src="online.js">
       // タイマー
       setInterval(function() {
               // 手動でキャッシュ対象が更新されているかを2秒置きにチェック
               applicationCache.update();
           } , 2000);
       // ダウンロード完了
       applicationCache.onupdateready = function() {
           if(confirm("キャッシュ用ファイルが更新されました、更新しますか？"))
           {
               // キャッシュ更新
               applicationCache.swapCache();
               // ページリロード
               location.reload();
           }
       }
   </script>
</head>
<body>
<img src="logo.jpg" alt="logo"/>
<input id="bn" type="button" value="送信"/>
<label>ABCDE</label>
</body>
</html>