html 5オフライン応用

3224 ワード

html 5 manifestを使用して、ユーザーが手動でデータを削除しない限り、オフラインアプリケーションの開発を開始します.オフラインファイルはユーザークライアントに保存されています.
各manifestが指定されたページは、ユーザーがアクセスするときにキャッシュされます.manifestプロパティが指定されていない場合、manifestファイルで直接ページが指定されていない限り、ページはキャッシュされません.
manifestファイルの推奨ファイル拡張子は「.appcache」です.
manifestファイルには、正しいMIME-type、すなわち「text/cache-manifest」を構成する必要があります.Webサーバ上で構成する必要があります.
manifestファイルは、ブラウザにキャッシュされたコンテンツ(およびキャッシュされていないコンテンツ)を通知する簡単なテキストファイルです.
manifestファイルは3つの部分に分けられます.
  • CACHE MANIFEST-このタイトルの下にあるファイルは、初回ダウンロード後にキャッシュ
  • が実行されます.
  • NETWORK-このタイトルの下に示すファイルは、サーバへの接続が必要であり、
  • はキャッシュされません.
  • FALLBACK-このタイトルの下に示すファイルは、ページがアクセスできない場合のロールバックページ(例えば404ページ)
  • を規定する.
    使用方法
  • 声明
  • <!DOCTYPE>
    <html manifest="/index.manifest">
    ...
    <body onload="CheckManifest();">

      2. manifestファイルを編集します.注:アプリケーションに関連するすべてのファイルは、このファイルに一致します.
    CACHE MANIFEST
    
    # VERSION 1.0 Testing Code 20140630 16:28
    #          
    CACHE:
    /JS/modernizr.js
    /JS/prototype.1.7.1.js
    #          ,      
    NETWORK:
    /JS/manifest_handling.js
    /content/
    #google    
    http://maps.googleapis.com/maps/api/js?sensor=false
    http://maps.gstatic.com/
    http://maps.google.com/
    http://maps.googleapis.com/
    http://mt0.googleapis.com/
    http://mt1.googleapis.com/
    http://mt2.googleapis.com/
    http://mt3.googleapis.com/
    http://khm0.googleapis.com/
    http://khm1.googleapis.com/
    http://cbk0.googleapis.com/
    http://cbk1.googleapis.com/
    http://www.google-analytics.com/
    http://gg.google.com/
    http://fonts.googleapis.com/
    http://mt0.googleapis.com/
    http://csi.gstatic.com/
    http://themes.googleusercontent.com/
    #      ,      ;            ,       
    FALLBACK:
    /html5/ /404.html

      3. cacheリスニングの処理
    /*
    http://dev.w3.org/html5/spec-author-view/offline.html#appcacheevents
    */
    var iMani_num = 0;
    var iMani_Total = 198;	/* Total Number of files is 'cache' + 2 (html + manifest) */
    
    function CheckManifest() {
    
    	var appCache = window.applicationCache;
    	//$('manifest_box').show();
    	if (appCache) {
    		// First Time cache 
    		appCache.oncached = function() {
    			$('div_manifest').innerHTML = "<span>All completed.</span>";
    			$('manifest_box').hide();
    		};
    
    		// Manifest Update 
    		appCache.onupdateready = function() {
    			if (appCache.status == appCache.UPDATEREADY) {
    				$('manifest_box').show();
    				// Browser downloaded a new app cache.
    				// Swap it in and reload the page to get the new version.
    				appCache.swapCache();
    
    				$('div_manifest').innerHTML = "<span style='text-align:center;'>New version is ready, click <a href='javascript:window.location.reload();' style='color:red;'>here</a> to refresh now.</span>";
    			}
    		};
    
    		// Progress 
    		appCache.onprogress = function() {
    			// Total Number of files is 'cache' + 2 (html + manifest) 
    			$('manifest_box').show();
    			iMani_num++;
    			var iLoaded = Math.round((iMani_num/iMani_Total)*100);
    			if (iLoaded > 100.0) iLoaded = 100;
    			$('div_manifest').innerHTML = "<span style='text-align:center;'>Loading... " + iLoaded + "%</span>";
    		};
    	}
    	
    }