HTML5アプリケーションキャッシュの知識ポイントを詳しく解説 Application Cache-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

巴扎黑

May 01, 2017 pm 02:48 PM

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

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 までご連絡ください。