HTML 5オフラインキャッシュアプリケーションCacheは、iframeを介してリモートサーバファイルを直接キャッシュします.
3706 ワード
数日の研究を通じてHMTL 5のオフラインキャッシュ、ネット上の資料はたくさん調べて、本をめくっても読んで、振り回されてやっとできました.次は私の理解です.初心者に手伝ってほしいです.
一、Cache Manifestとは
ところで、Web開発関係者として、cacheという言葉を耳にしたり、見たりすることは少なくありません.はい、前述したように、キャッシュのメカニズムです.それは1つを通過することができます.manifestファイルは、キャッシュが必要なファイルまたはネットワークキャッシュを維持しなければならないファイルを構成します.ポイントはこれですmanifestファイル、具体的にはGoogleでいいですが、簡単に今知りたいことを整理してあげます.
MIME TYPE:text/cache-manifest
あなたが作成する必要があります:NAME.manifest
役割:主にキャッシュが必要なファイルを構成します.
二、testを作成する.manifestファイル
CACHE MANIFEST
#version 5.0
#直接キャッシュされたファイル
CACHE:
#絶対パスも相対パスも可能
js/initial.js
js/keyevent.js
js/uianimate.js
js/jquery.min.js
loading.gif
bg.jpg
jquery-mini-1.8.2.js
#時間オンラインで必要なファイル*番号は、上のキャッシュファイル以外はオンラインアクセスです.
NETWORK:
*
#代替案
FALLBACK
online.html off.html
三、indexをあげる.hmtlラベルにmanifestプロパティを追加:
index.hmtlページにはいくつかのイベントを書くことができます
//手動でwindowを更新する.applicationCache.update();
applicationCache.onchecking = function(){
//manifestファイルが存在するかどうかを確認する
}
applicationCache.ondownloading = function(){
//manifestまたはmanifestファイルがあることを確認
//更新したらダウンロード
//キャッシュが必要なファイルがリクエスト時にサーバが戻ってきたとしても
}
applicationCache.onnoupdate = function(e){
//戻る304は更新されていないことを示し、ブラウザにローカルファイルを直接使用することを通知する
}
applicationCache.onprogress = function(){
//ダウンロード時に周期的にトリガーされ、それを通して
//ダウンロードしたファイル数の取得
}
applicationCache.oncached = function(){
//ダウンロード終了後にトリガーされ、キャッシュが成功したことを示す
}
applicationCache.onupdateready = function(){
//2回目の読み込み、manifestが更新された場合
//ダウンロード終了時にトリガー
//onchchedをトリガーしない
alert(「ローカルキャッシュが更新中...」);
if(confirm(「更新ファイルを再読み込みするかどうか」)
applicationCache.swapCache();//最新バージョンのキャッシュリストが取得され、リソースが正常にダウンロードされ、最新バージョンのキャッシュが更新されました.
location.reload();
}
}
//インベントリ5手動更新キャッシュ
//if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛ window.applicationCache.update(); ｝
applicationCache.onobsolete = function(){
//ファイルが見つからず、404または401に戻るとトリガーされます
}
applicationCache.onerror = function(){
//オフラインストレージに関するその他のエラー
}
四、発生した問題
上記の方法でキャッシュできますが、この場合はtestです.manifestファイルとキャッシュするファイルは同じ項目の下にあります.
今問題なのは、ローカルファイルにアクセスしてindexをキャッシュすることです.html関連のファイル.
ローカルファイルhtmlローカルにはtestがありませんmanifest
私はloadingにいたいと思っていましたhtmlページは次のように設定されています.
これではキャッシュできません
五、ローカルファイルを動的にキャッシュする方法
loading.htmlページにiframeタグSRCを付けるとサーバファイルCacheを指す.html
このようにして动态のページをキャッシュすることができて、书いて书いてはっきり言えないと感じて、もし何か知らないことがあるならば私のQQ 463968565をプラスすることができます
一、Cache Manifestとは
ところで、Web開発関係者として、cacheという言葉を耳にしたり、見たりすることは少なくありません.はい、前述したように、キャッシュのメカニズムです.それは1つを通過することができます.manifestファイルは、キャッシュが必要なファイルまたはネットワークキャッシュを維持しなければならないファイルを構成します.ポイントはこれですmanifestファイル、具体的にはGoogleでいいですが、簡単に今知りたいことを整理してあげます.
MIME TYPE:text/cache-manifest
あなたが作成する必要があります:NAME.manifest
役割:主にキャッシュが必要なファイルを構成します.
二、testを作成する.manifestファイル
CACHE MANIFEST
#version 5.0
#直接キャッシュされたファイル
CACHE:
#絶対パスも相対パスも可能
js/initial.js
js/keyevent.js
js/uianimate.js
js/jquery.min.js
loading.gif
bg.jpg
jquery-mini-1.8.2.js
#時間オンラインで必要なファイル*番号は、上のキャッシュファイル以外はオンラインアクセスです.
NETWORK:
*
#代替案
FALLBACK
online.html off.html
三、indexをあげる.hmtlラベルにmanifestプロパティを追加:
index.hmtlページにはいくつかのイベントを書くことができます
//手動でwindowを更新する.applicationCache.update();
applicationCache.onchecking = function(){
//manifestファイルが存在するかどうかを確認する
}
applicationCache.ondownloading = function(){
//manifestまたはmanifestファイルがあることを確認
//更新したらダウンロード
//キャッシュが必要なファイルがリクエスト時にサーバが戻ってきたとしても
}
applicationCache.onnoupdate = function(e){
//戻る304は更新されていないことを示し、ブラウザにローカルファイルを直接使用することを通知する
}
applicationCache.onprogress = function(){
//ダウンロード時に周期的にトリガーされ、それを通して
//ダウンロードしたファイル数の取得
}
applicationCache.oncached = function(){
//ダウンロード終了後にトリガーされ、キャッシュが成功したことを示す
}
applicationCache.onupdateready = function(){
//2回目の読み込み、manifestが更新された場合
//ダウンロード終了時にトリガー
//onchchedをトリガーしない
alert(「ローカルキャッシュが更新中...」);
if(confirm(「更新ファイルを再読み込みするかどうか」)
applicationCache.swapCache();//最新バージョンのキャッシュリストが取得され、リソースが正常にダウンロードされ、最新バージョンのキャッシュが更新されました.
location.reload();
}
}
//インベントリ5手動更新キャッシュ
//if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛ window.applicationCache.update(); ｝
applicationCache.onobsolete = function(){
//ファイルが見つからず、404または401に戻るとトリガーされます
}
applicationCache.onerror = function(){
//オフラインストレージに関するその他のエラー
}
四、発生した問題
上記の方法でキャッシュできますが、この場合はtestです.manifestファイルとキャッシュするファイルは同じ項目の下にあります.
今問題なのは、ローカルファイルにアクセスしてindexをキャッシュすることです.html関連のファイル.
ローカルファイルhtmlローカルにはtestがありませんmanifest
私はloadingにいたいと思っていましたhtmlページは次のように設定されています.
これではキャッシュできません
五、ローカルファイルを動的にキャッシュする方法
loading.htmlページにiframeタグSRCを付けるとサーバファイルCacheを指す.html
<html id="html" manifest='test.manifest'>
<head>
<title>loading</title>
</head>
<body>
</body>
<script type="text/javascript">
var url=location.href.split("mac=");
url=url[1].split("&");
var mac=url[0];
var user=url[1].split("user=")[0];
applicationCache.onupdateready = function(){
// ， manifest http://172.249.0.89:8081/ftp/sangsang/
//
// onchched
alert(" 。。。");
if(confirm(" ")){
applicationCache.swapCache();// ， ，
location.reload();
}
localStorage.setItem("mac", mac);
localStorage.setItem("user" , user);
}
</script>
</html>このようにして动态のページをキャッシュすることができて、书いて书いてはっきり言えないと感じて、もし何か知らないことがあるならば私のQQ 463968565をプラスすることができます