ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5アプリケーションキャッシュの知識ポイントを詳しく解説 Application Cache

HTML5アプリケーションキャッシュの知識ポイントを詳しく解説 Application Cache

巴扎黑
巴扎黑オリジナル
2017-05-01 14:48:181536ブラウズ

アプリケーションキャッシュとは何ですか

HTML5 ではアプリケーション キャッシュ テクノロジが導入されており、キャッシュ マニフェスト ファイルを作成することで、Web アプリケーションをキャッシュしてネットワークなしで使用できるようになり、オフライン アプリケーションを簡単に作成できます。

アプリケーション キャッシュによってもたらされる 3 つの利点は次のとおりです:

① オフラインで閲覧

② ページの読み込み速度の向上

③サーバー負荷を軽減

また、主要なブラウザはすべてアプリケーションキャッシュをサポートしていますので、サポートしていなくてもプログラムに影響はありません

。 オフラインストレージテクノロジー

HTML5 は、localstorage と Application Cache という 2 つの主要なオフライン ストレージ テクノロジを提案しています。どちらにも独自のアプリケーション シナリオがあります。従来のオフライン ストレージ テクノロジは Cookie です。

練習後、タスクの localstorage は重要ではない ajax データを保存する必要があります

。 アプリケーション キャッシュは静的リソースを保存するために使用されますが、これはあくまでもおまけです

。 Cookie は小さなテキスト (4096 バイト) しか保存できないため、大きなデータは保存できません。これが Cookie と前述のキャッシュ テクノロジの違いの 1 つです。HTTP はステートレスであるため、サーバーはリクエストを区別する必要があります。同じサーバーから発信されている場合、識別文字列が必要であり、このタスクはユーザーの権限を確認するために毎回サーバーとブラウザーの間で渡されます。

したがって、アプリケーション キャッシュのアプリケーション シナリオが異なるため、使用方法が不一致になります。

アプリケーションキャッシュの紹介

アプリケーション キャッシュを使用するには、次の 2 つの側面の作業が必要です:

① サーバーはマニフェストリストを維持する必要があります

②ブラウザ上で簡単な設定だけ

<html  manifest="demo.appcache">

例を挙げて説明します:

CACHE MANIFEST

CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js

http://localhost/applicationcache/02.js


http://localhost/applicationcache/zepto.js

NETWORK:
# 不需要缓存的
4.jpg

FALLBACK:
# 访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件*.html /offline.html
2.jpg/3.jpg

まず、ここでエラーを報告しました:

 Application Cache Error event: Manifest fetch failed (404)

このエラーの理由は、マニフェスト ファイルが正しい MIME タイプ、つまり「text/cache-manifest」で構成されている必要があるためです。 Webサーバーで設定する必要があります。サーバーが異なると異なります

りー

このようにすると、現時点でインターネットが切断されている場合でも、それらのファイルにアクセスできます

ここで注意すべき点が 1 つあります。たとえば、/index.html がここに含まれていない場合、実際には「applicationcache/」がキャッシュされます。

図に示すように、HTML5 ではいくつかのイベント ポイントが定義されていますが、通常、js を積極的に使用して動作することはほとんどなく、ブラウザーの処理に完全に依存しています。

サイズ制限

アプリケーション キャッシュのサイズ制限は 5M に統一されています。ここでテストしてみましょう:

示されているように、2 つの CSS ファイルは現時点でもまだ 5M を超えています

\APPLICATIONCACHE
    01.js
    02.js
    1.jpg
    2.jpg
    3.jpg
    4.jpg
    demo.appcache
    index.html
    style1.css
    style2.css
    web.config
    zepto.js

示されているように、style2 はキャッシュできなくなります。これによりどのような問題が発生しますか?

たとえば、チャネル A は独自のアプリケーション キャッシュを維持し、チャネル B も独自のアプリケーション キャッシュを維持します。このとき、チャネル A の使用量がピークに達すると、チャネル B のすべてのキャッシュが無効になるため、次のようになります。 いくつかの質問

更新メカニズムに関しては、マニフェストが初めて更新されるとき、ページの読み込みがすでに開始されているか、完了していても、キャッシュの更新がまだ完了していないため、ブラウザーはアプリケーション キャッシュの有効期限が切れたリソースを引き続き使用します。が更新された場合、ブラウザは今回は新しいリソースを使用しません。リソースは 2 回目にのみ使用されます。このとき、updateイベント内でwindow.reloadイベントが実行されます。

りー

上記の例から、キャッシュは単なる表示定義ファイルではないことがわかります。たとえば、上記の例の applicationcache/ は、デフォルトで、index.html をマップされたデータとして保存し、demo.appcache ファイルをインクルードします。ファイルの更新は常にオンラインでは行われませんが、マニフェスト構成ファイルに変更を加えるだけで更新できます。

たとえば、次のコードを変更してみましょう:

manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

この時点でdemo.appcacheが更新されていない場合、キャッシュは更新されません。その理由は、index.htmlがキャッシュされており、元のマニフェストリストがまだ検出されているためです。 各ページは独自のマニフェスト リストを統一的に管理します。つまり、ページ a は common.js で構成され、ページ b も common.js で構成されます。これは、ページ a が更新された後、ページ b のマニフェストが更新されることを意味します。は変更されず、ページ b は依然として読み取られます。古いバージョンのファイルの場合、これは理にかなっていますが、無駄でもあり、処理には公開ページが必要です。

まとめ

使いやすさと使いやすさの観点からは、アプリケーション キャッシュを使用する価値がありますが、実際にオフライン アプリケーションを実装するには、静的リソースをキャッシュするのが最善です。

以上がHTML5アプリケーションキャッシュの知識ポイントを詳しく解説 Application Cacheの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。