HTML5 オフラインキャッシュとは Manifest_html5 チュートリアルスキル-H5 チュートリアル-php.cn

HTML5 オフラインキャッシュとは Manifest_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:51:34

オリジナル

1944 人が閲覧しました

Web アプリは PC に劣りません。オフラインアプリケーションの重要性はますます高まっていますが、通常の状況では HTML ファイルは信頼できません。インターネットの登場後はすべてが終わりました。

マニフェストとは何ですか?

簡単に言うと、マニフェストを使用すると、ネットワーク接続がなくてもアプリケーションにアクセスできるようになります。

それには 3 つの大きな利点 があります:

1. オフライン閲覧、ネットワークなしでも通常のアクセス。

2. 読み込み速度が速くなり、キャッシュされたローカルアクセス速度も自然に速くなります。

3. ファイルがキャッシュされた後は、再度リクエストする必要はなく、必要なファイルのみを更新することで、サービスリクエストの負荷を軽減します。

使い方は？

XML/HTML コード

コンテンツをクリップボードにコピー

>
<html マニフェスト=」デモ。 appcache">
html>

キャッシュする Web アプリのすべてのページに、manifest 属性を含める必要があります。ページにマニフェスト属性がない場合、そのページはキャッシュされません (マニフェストファイルでページが明示的に指定されていない限り)。これは、ユーザーが訪問したページにマニフェスト属性が含まれている限り、そのページがアプリケーションキャッシュに追加されることを意味します。この方法では、マニフェストファイルにキャッシュする必要があるページを指定する必要がありません。

Manifest 属性では絶対 URL または相対パスを指定できます。ただし、絶対 URL は Web アプリと同じ生成元のものである必要があります。マニフェストファイルには任意の拡張子ファイルタイプを使用できますが、Apache で

を追加するなど、正しい MIME タイプが必要です。

「AddType text/cache-manifest .appcache」。

マニフェストファイル

マニフェストファイルは、何がキャッシュされるか (何がキャッシュされないのか) をブラウザーに伝える単純なテキストファイルです。

マニフェストファイルは 3 つの部分に分けることができます:

キャッシュマニフェスト - この見出しの下にリストされているファイルは、最初のダウンロード後にキャッシュされます
ネットワーク - ファイル内の この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません
FALLBACK - この見出しの下にリストされているファイルは、ページにアクセスできない場合のフォールバックを指定します (404 など)ページ) 完全なマニフェストファイル:

XML/HTML コード

コンテンツをクリップボードにコピー

キャッシュマニフェスト

CACHE MANIFEST は必須です。# の後には、キャッシュする必要があるファイルがあり、NETWORK はリクエストごとにロードする必要があるファイルです。

アスタリスクは、他のすべてのリソース/ファイルにインターネット接続が必要であることを示すために使用できます:

NETWORK:*

FALLBACK はインターネット接続の場合です接続を確立できない場合は、「404.html」を使用して /html5/ ディレクトリ内のすべてのファイルを置き換えます。

更新メカニズム

マニフェストキャッシュを更新するには、次の 3 つの方法があります。1. マニフェストファイルが変更された場合でも、ユーザーがクリアします。はコメントです (コメントで変更してファイルを更新できます)
3. プログラムによる更新

キャッシュステータス

window.applicationCache プロパティを通じてプログラム内のキャッシュステータスを表示できます。

C/C コード

コンテンツをクリップボードにコピーします

var appCache = window.applicationCache;
スイッチ (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'キャッシュされていません';
休憩;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
休憩;
case appCache.CHECKING: // CHECKING == 2
return 「チェック中」;
休憩;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 「ダウンロード中」;
休憩;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return ‘更新準備完了’;
休憩;
case appCache.OBSOLETE: // OBSOLETE == 5
return 「廃止」;
休憩;
デフォルト:
return '既知のキャッシュステータス';
休憩;
};

プログラムでキャッシュを更新するには、まず applicationCache.update() を呼び出します。これにより、ユーザーのキャッシュの更新が試行されます (マニフェストファイルが変更されている必要があります)。最後に、applicationCache.status が UPDATEREADY 状態のときに applicationCache.swapCache() を呼び出すと、古いキャッシュが新しいキャッシュに置き換えられます。

C/C コードコンテンツをクリップボードにコピーします

var appCache = window.applicationCache
appCache.update(); // ユーザーのキャッシュを更新しようとします。
…
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // フェッチは成功しました。
}

注: このように update() と swapCache() を使用しても、更新されたリソースはユーザーに表示されません。これにより、ブラウザーはマニフェストファイルが更新されたかどうかを確認し、指定された更新コンテンツをダウンロードしてアプリのキャッシュを再作成できるようになります。したがって、ユーザーが更新されたコンテンツを表示するには、2 つのページのダウンロードが必要です。1 つはアプリのキャッシュを更新し、もう 1 つはページのコンテンツを更新します。

ユーザーがサイトの最新バージョンを表示できるようにするには、ページの読み込み時に updateready イベントをリッスンするリスナーを設定します。

C/C コードコンテンツをクリップボードにコピーします

// ページの読み込み時に新しいキャッシュが利用可能かどうかを確認します。
window.addEventListener(‘load’, function(e) {
window.applicationCache.addEventListener(‘updateready’, function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// ブラウザは新しいアプリのキャッシュをダウンロードしました。
// 入れ替えてページをリロードして、新しいホットネスを取得します。
window.applicationCache.swapCache();
window.location.reload();
} else {
// サーバーにとって新しいことは何もありません。
}
},
);
false

イベントをリッスンし、それに応じてさまざまな状態を処理します:

C/C コードコンテンツをクリップボードにコピーします

var appCache = window.applicationCache
// マニフェストの最初のキャッシュの後に起動されます。
appCache.addEventListener(‘cached’, handleCacheEvent, false);
// 常にシーケンス内の最初のイベントが発生するかどうかを確認します。
false
appCache.addEventListener(‘ダウンロード中’, handleCacheEvent,
);
// マニフェストは 404 または 410 を返し、ダウンロードは失敗しました。
// または、ダウンロードの進行中にマニフェストが変更されました。
appCache.addEventListener(‘error’, handleCacheError, false
// マニフェストの最初のダウンロード後に起動されます。
appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
// マニフェストファイルが 404 または 410 を返した場合に起動されます。
// これにより、アプリケーションキャッシュが削除されます。
false);
appCache.addEventListener(‘progress’, handleCacheEvent,
);
// マニフェストリソースが新たに再ダウンロードされたときに発生します。
appCache.addEventListener(‘updateready’, handleCacheEvent, false
マニフェストファイルまたはファイル内で指定されたリソースのダウンロードに失敗すると、更新全体が失敗します。この場合、ブラウザは引き続き古いアプリケーションキャッシュを試行します。

注:

1. サイトのオフラインストレージの容量制限は 5M です
2. マニフェストファイルまたは内部にリストされているファイルを正常にダウンロードできない場合、更新プロセス全体が失敗とみなされ、ブラウザは続行されます。古いキャッシュを使用するには
3. マニフェストを参照する HTML はマニフェストファイルと同じ生成元を持ち、同じドメイン内にある必要があります。
4. マニフェストで使用される相対パス。相対参照はマニフェストです。ファイル
5. 最初の行には CACHE MANIFEST 文字列が必要です。
6. システムはマニフェストファイルを参照する HTML ファイルを自動的にキャッシュします
7. マニフェストファイル内の CACHE には何もありません。 NETWORK と FALLBACK の位置順序に関係するため、暗黙的な宣言の場合は、Front
8 にある必要があります。リソースの場合、FALLBACK のリソースはマニフェストファイルと同じオリジンを持つ必要があります。がキャッシュされている場合、ブラウザは絶対パスを直接要求し、キャッシュ内のリソースにもアクセスします。
10. サイト内の他のページにマニフェスト属性が設定されていない場合でも、リクエストされたリソースがキャッシュ内にある場合は、キャッシュからアクセスされます。
11. マニフェストファイルが変更されると、リソースリクエスト自体が変更されます。アップデートをトリガーします

上記は HTML5 オフラインキャッシュマニフェストの関連コンテンツの紹介です。皆様の学習に役立つことを願っています。

原文:
http://www.cnblogs.com/hutuzhu/p/4871666.html