html 5でmanifestキャッシュの作成と更新方法

3097 ワード

今日はmanifestに関する知識を学び、将来調べるために以下のように記録しました.
一、manifest
MIME TYPE:text/cache-manifest
あなたが作成する必要があります:NAME.manifest
役割:主にキャッシュが必要なファイルを構成します.
二、実現
サーバにMIME TYPEブランチを追加する:例えばApacheで.htaccessに追加:

AddType text/cache-manifest manifest

NAMEを作成します.manifest:最初の行のCACHE MANIFEST IDは必ずあります(テスト時に火狐を付けなくてもキャッシュに成功することがわかりましたが、他の影響があるかどうか分かりません).CACHE/NETWORK/FACKBACKの3つのキーワードは異なる機能に使用され、CACHEキャッシュ;NETWORKとはキャッシュしたくないページのこと.FALLBACKとは、応答がない場合の代替案です.例えば、ページを要求したいのですが、このページのサーバが切れている場合は、別の指定されたページを表示することができます.ファイル符号化はutf-8が好ましい.行の先頭「#」はコメントです.

CACHE MANIFEST
# VERSION

#        d
CACHE:
m.js
m1.js

#           
NETWORK:
cache.html 

#     
FALLBACK:
#/ajax/ ajax.html

3.htmlファイルの改造
ラベルにmanifestプロパティを追加

<html manifest="m.manifest">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="m.js"></script>
</head>
<body>
ver:5<p>
<input type="button" value="shwo_ver" onclick="show_ver();" /><p>
<input type="button" value="load_js" onclick="load_js();" /><p>
<input type="button" value="is_online" onclick="is_online();" /><p>
</body>
</html>

三、テスト
chromeの開発者ツール」Consoleにはキャッシュの作成状況が表示されます

Document was loaded from Application Cache with manifest http://127.0.0.1/work/html5/manifest/m.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 4) http://127.0.0.1/work/html5/manifest/m.js
Application Cache Progress event (1 of 4) http://127.0.0.1/work/html5/manifest/m1.js
Application Cache Progress event (2 of 4) http://127.0.0.1/work/html5/manifest/cache.html
Application Cache Progress event (3 of 4) http://127.0.0.1/work/html5/manifest/cache1.html
Application Cache Progress event (4 of 4) 
Application Cache UpdateReady event

四、更新について
1.≪自動更新|Auto Update|ldap≫:ブラウザは、Webアプリケーションへの最初のアクセス時にリソースをキャッシュするほか、コメントの変更であってもcache manifestファイル自体が変更された場合にのみキャッシュを更新します.cache manifestのリソースファイルが変更されても、更新はトリガーされません. 2.手動更新:開発者もwindowを使用できます.アプリケーションCacheのインタフェースはキャッシュを更新します.方法はwindowを検出することです.applicationCache.statusの値はUPDATEREADYであればwindowを呼び出すことができます.applicationCache.update()キャッシュを更新します.サンプルコードは以下の通りです.

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛
        window.applicationCache.update(); 
｝

五、オンライン状態の検出と監視
1.検出:navigator.onLineプロパティは、現在オンラインかどうかを示します.trueの場合、オンラインを表します.falseの場合はオフラインを表します
2.監視:オンライン/オフライン状態が切り替わるとonline/offlineイベントがトリガーされ、body要素上でdocumentに沿ってトリガーされます.body、document、windowの順番に泡が立ちます.
参照先:
HTML 5を使用したオフラインアプリケーションの開発http://www.189works.com/article-68089-1.html
HTML 5オフライン編コレクション---cache manifesthttp://www.cnblogs.com/brainmao/archive/2011/09/27/2193495.html

urlパラメータはurlで、取得時にパラメータが失われます

sessionStrageとlacalStorageとクッキー