読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

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>

・動作確認

  1. サーバを起動し、index.htmlをリクエストし、ボタンクリック ⇒ オンライン
  2. サーバを停止し、index.htmlをリクエストし、ボタンクリック ⇒ オフライン f:id:liguofeng29:20160214222349g:plain

※ブラウザの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>

動作確認

  1. index.htmlのlabelを修正する
  2. index.manifestのversionを2に修正する

f:id:liguofeng29:20160214225556g:plain