検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 オフライン キャッシュとは Manifest_html5 チュートリアル スキル

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

WBOY
WBOYオリジナル
2016-05-16 15:51:342005ブラウズ

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

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

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

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

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

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

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

使い方は？

XML/HTML コード
コンテンツをクリップボードにコピー
  1. >
  2. <html マニフェスト=」デモ。 appcache">
    3. ...
  4. html>
キャッシュする Web アプリのすべてのページに、manifest 属性を含める必要があります。ページにマニフェスト属性がない場合、そのページはキャッシュされません (マニフェスト ファイルでページが明示的に指定されていない限り)。これは、ユーザーが訪問したページにマニフェスト属性が含まれている限り、そのページがアプリケーション キャッシュに追加されることを意味します。この方法では、マニフェスト ファイルにキャッシュする必要があるページを指定する必要がありません。

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

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

「AddType text/cache-manifest .appcache」。

マニフェストファイル

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

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

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

XML/HTML コード
コンテンツをクリップボードにコピー
  1. キャッシュマニフェスト
    2. # 2012-02-21 v1.0.0
    3. /theme.css
    4. /logo.gif
    5. /main.js
    7. ネットワーク:
    8. login.asp
    10. フォールバック:
    11. /html5/ /404.html
CACHE MANIFEST は必須です。# の後には、キャッシュする必要があるファイルがあり、NETWORK はリクエストごとにロードする必要があるファイルです。
アスタリスクは、他のすべてのリソース/ファイルにインターネット接続が必要であることを示すために使用できます:



NETWORK:*

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

更新メカニズム

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


キャッシュ ステータス

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

C/C コード
コンテンツをクリップボードにコピーします
  1. var appCache = window.applicationCache;   
  3. スイッチ (appCache.status) {
  5. case appCache.UNCACHED: // UNCACHED == 0
  7. return 'キャッシュされていません';   
  9. 休憩;   
  11. case appCache.IDLE: // IDLE == 1
  13. return 'IDLE';   
  15. 休憩;   
  17. case appCache.CHECKING: // CHECKING == 2
  19. return 「チェック中」;   
  21. 休憩;   
  23. case appCache.DOWNLOADING: // DOWNLOADING == 3
  25. return 「ダウンロード中」;   
  27. 休憩;   
  29. case appCache.UPDATEREADY: // UPDATEREADY == 4
  31. return ‘更新準備完了’;   
  33. 休憩;   
  35. case appCache.OBSOLETE: // OBSOLETE == 5
  37. return 「廃止」;   
  39. 休憩;   
  41. デフォルト:
  43. return '既知のキャッシュ ステータス';   
  45. 休憩;   
  47. };   

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

C/C コードコンテンツをクリップボードにコピーします
  1. var appCache = window.applicationCache
  3. appCache.update(); // ユーザーのキャッシュを更新しようとします。
  5. …
  7. if (appCache.status == window.applicationCache.UPDATEREADY) {
  9. appCache.swapCache(); // フェッチは成功しました。
  11. }

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

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

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

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

C/C コードコンテンツをクリップボードにコピーします
  1. var appCache = window.applicationCache
  3. // マニフェストの最初のキャッシュの後に起動されます。
  5. appCache.addEventListener(‘cached’, handleCacheEvent, false);
  7. // 常にシーケンス内の最初のイベントが発生するかどうかを確認します。
    8. appCache.addEventListener(‘checking’, handleCacheEvent,
  8. false
    9. );
    10. // ブラウザはリソースを取得しています。
  11. appCache.addEventListener(‘ダウンロード中’, handleCacheEvent,
    12. false
  12. );
  13. // マニフェストは 404 または 410 を返し、ダウンロードは失敗しました。
  15. // または、ダウンロードの進行中にマニフェストが変更されました。
  17. appCache.addEventListener(‘error’, handleCacheError, false
    18. );
  19. // マニフェストの最初のダウンロード後に起動されます。
  21. appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
  23. // マニフェスト ファイルが 404 または 410 を返した場合に起動されます。
  25. // これにより、アプリケーション キャッシュが削除されます。
    27. appCache.addEventListener(‘obsolete’, handleCacheEvent,
  27. false);
    29. // フェッチされるときにマニフェストにリストされているリソースごとに起動されます。
  29. appCache.addEventListener(‘progress’, handleCacheEvent,
    30. false
  30. );
  31. // マニフェスト リソースが新たに再ダウンロードされたときに発生します。
  33. appCache.addEventListener(‘updateready’, handleCacheEvent, false
    34. );

  34. マニフェスト ファイルまたはファイル内で指定されたリソースのダウンロードに失敗すると、更新全体が失敗します。この場合、ブラウザは引き続き古いアプリケーション キャッシュを試行します。

    注:

    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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5_html5 のセマンティック b タグと i タグに関するチュートリアルのヒント次の記事：HTML5_html5 のセマンティック b タグと i タグに関するチュートリアルのヒント

関連記事

続きを見る