HTML 5オフラインキャッシュマニフェスト
7774 ワード
Web appはPCに比べて、性能と流量の方面の考慮があって、オフラインの応用はますます重要になって、ブラウザはキャッシュのメカニズムがありますが、しかしよく頼りにならないで、まして普通の情況のhtmlファイルはキャッシュすることができなくて、ネットを切った後にすべてover.
manifestとは?
簡単に言えばmanifestはあなたのアプリケーションをネットなしでアクセスすることができます.
3つのメリットがあります.
1、オフラインで閲覧し、ネットがない場合でも正常にアクセスできる.
2、より速いロード速度、キャッシュのローカルアクセス速度は自然により速い;
3、サービス要求の圧力を軽減し、ファイルキャッシュ後に再度要求する必要はなく、更新が必要なファイルだけを要求する.
使用方法
キャッシュしたいweb appの各ページにmanifestプロパティを含める必要があります.ページにmanifestプロパティがない場合、manifestファイルでこのページが明示的に指定されていない限り、ページはキャッシュされません.これは、ユーザーがアクセスするページにmanifestプロパティが含まれている限り、アプリケーションcacheに追加されることを意味します.これにより、manifestファイルでキャッシュするページを指定する必要はありません.
Manifestプロパティは、絶対URLまたは相対パスを指定できますが、絶対URLはweb appと同源である必要があります.1つのmanifestファイルは任意の拡張ファイルタイプであってもよいが、Apacheに追加するなど、正しいmime-typeが必要である.
“AddType text/cache-manifest .appcache”.
Manifestファイル
manifestファイルは、ブラウザにキャッシュされたコンテンツ(およびキャッシュされていないコンテンツ)を通知する簡単なテキストファイルです.
manifestファイルは3つの部分に分けられます. CACHE MANIFEST-このタイトルの下にあるファイルは、初回ダウンロード後にキャッシュ が実行されます. NETWORK-このタイトルの下に示すファイルは、サーバへの接続が必要であり、 はキャッシュされません. FALLBACK-このタイトルの下に示すファイルは、ページがアクセスできない場合のロールバックページ(例えば404ページ) を規定する.
完全なmanifestファイル:
manifestとは?
簡単に言えばmanifestはあなたのアプリケーションをネットなしでアクセスすることができます.
3つのメリットがあります.
1、オフラインで閲覧し、ネットがない場合でも正常にアクセスできる.
2、より速いロード速度、キャッシュのローカルアクセス速度は自然により速い;
3、サービス要求の圧力を軽減し、ファイルキャッシュ後に再度要求する必要はなく、更新が必要なファイルだけを要求する.
使用方法
<!DOCTYPE HTML>
<html manifest="demo.appcache"> ... </html>
キャッシュしたいweb appの各ページにmanifestプロパティを含める必要があります.ページにmanifestプロパティがない場合、manifestファイルでこのページが明示的に指定されていない限り、ページはキャッシュされません.これは、ユーザーがアクセスするページにmanifestプロパティが含まれている限り、アプリケーションcacheに追加されることを意味します.これにより、manifestファイルでキャッシュするページを指定する必要はありません.
Manifestプロパティは、絶対URLまたは相対パスを指定できますが、絶対URLはweb appと同源である必要があります.1つのmanifestファイルは任意の拡張ファイルタイプであってもよいが、Apacheに追加するなど、正しいmime-typeが必要である.
“AddType text/cache-manifest .appcache”.
Manifestファイル
manifestファイルは、ブラウザにキャッシュされたコンテンツ(およびキャッシュされていないコンテンツ)を通知する簡単なテキストファイルです.
manifestファイルは3つの部分に分けられます.
完全なmanifestファイル:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
CACHE MANIFEST ,# , cache , ,NETWORK 。
/ :
NETWORK:
*
FALLBACK , "404.html" /html5/ 。
manifest :
1、 ;
2、manifest , ( )
3、
window.applicationCache 。
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return ‘UNCACHED’;
break;
case appCache.IDLE: // IDLE == 1
return ‘IDLE’;
break;
case appCache.CHECKING: // CHECKING == 2
return ‘CHECKING’;
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return ‘DOWNLOADING’;
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return ‘UPDATEREADY’;
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return ‘OBSOLETE’;
break;
default:
return ‘UKNOWN CACHE STATUS’;
break;
};
为了通过编程更新cache,首先调用 applicationCache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后,当 applicationCache.status 处于 UPDATEREADY 状态时, 调用applicationCache.swapCache(),旧的cache就会被置换成新的。
var appCache = window.applicationCache; appCache.update(); // Attempt to update the user’s cache. … if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // The fetch was successful, swap in the new cache. }
注意:このようにupdate()とswapCache()を使用しても、更新されたリソースはユーザーに表示されません.これは、ブラウザにmanifestファイルが更新されたかどうかを確認し、指定した更新内容をダウンロードしてapp cacheを再入力させるだけです.したがって,更新後のコンテンツをユーザに見せるには,app cacheの更新とページコンテンツの更新の2回のページダウンロードが必要である.
ユーザーがあなたのサイトの最新バージョンを表示できるように、ページロード時のupdatereadyイベントをリスニングするリスナーを設定します.// Check if a new cache is available on page load. window.addEventListener(‘load’, function(e) { window.applicationCache.addEventListener(‘updateready’, function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Browser downloaded a new app cache. // Swap it in and reload the page to get the new hotness. window.applicationCache.swapCache(); window.location.reload(); } else { // Manifest didn’t changed. Nothing new to server. } }, false); }, false);
イベントをリスニングし、異なるステータスに対応する処理を行います.var appCache = window.applicationCache;
// Fired after the first cache of the manifest. appCache.addEventListener(‘cached’, handleCacheEvent, false); // Checking for an update. Always the first event fired in the sequence. appCache.addEventListener(‘checking’, handleCacheEvent, false); // An update was found. The browser is fetching resources. appCache.addEventListener(‘downloading’, handleCacheEvent, false); // The manifest returns 404 or 410, the download failed, // or the manifest changed while the download was in progress. appCache.addEventListener(‘error’, handleCacheError, false); // Fired after the first download of the manifest. appCache.addEventListener(‘noupdate’, handleCacheEvent, false); // Fired if the manifest file returns a 404 or 410. // This results in the application cache being deleted. appCache.addEventListener(‘obsolete’, handleCacheEvent, false); // Fired for each resource listed in the manifest as it is being fetched. appCache.addEventListener(‘progress’, handleCacheEvent, false); // Fired when the manifest resources have been newly redownloaded. appCache.addEventListener(‘updateready’, handleCacheEvent, false);
manifestファイルまたはファイルで指定したリソースのダウンロードに失敗した場合、更新全体が失敗します.この場合、ブラウザは古いアプリケーションcacheを試用し続けます.
注意事項:
1.サイトオフラインメモリの容量制限は5 M 2である.manifestファイル、または内部に列挙されたファイルが正常にダウンロードできない場合、更新プロセス全体が失敗したとみなされ、ブラウザは古いキャッシュをすべて使用し続けます.manifestを参照するhtmlは、manifestファイルと同じドメインの下にある必要があります.manifestで使用する相対パスで、相対参照物はmanifestファイル5である.CACHE MANIFEST文字列は最初の行にあるべきで、必ず少なくない6.インベントリファイルを参照するHTMLファイルが自動的にキャッシュされます.manifestファイルのCACHEはNETWORK,FALLBACKの位置順に関係なく、暗黙的な宣言であれば一番前の8.FALLBACKのリソースはmanifestファイルと同じソースでなければなりません.リソースがキャッシュされると、ブラウザはこの絶対パスを直接要求してキャッシュ内のリソースにもアクセスします.10.サイト内の他のページは、manifest属性が設定されていなくても、要求されたリソースがキャッシュから11にアクセスする.manifestファイルが変更されると、リソースリクエスト自体も更新をトリガーします.