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

HTML5 アプリケーションキャッシュ

アプリケーションキャッシュとはアプリケーションキャッシュ

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

アプリケーションキャッシュには 3 つの利点があります:

① オフラインブラウジング

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

③ サーバーの負荷の軽減

そして、すべての主要なブラウザはアプリケーションキャッシュをサポートしており、サポートしていなくても間違いはありませんプログラムにはどのような影響がありますか?

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

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

練習後、追加として、重要ではない Ajax データをローカルストレージに保存する必要があると考えています。

静的リソースの保存にはアプリケーションキャッシュが使用されますが、これは依然として追加です

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

つまり、Application Cache の適用シナリオが異なるため、使用方法も一貫性がありません。

アプリケーションキャッシュの概要

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

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

② ブラウザ上で必要なのは簡単な設定だけです

例で説明します:

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

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

アプリケーションキャッシュエラーイベント: マニフェストの取得に失敗しました (404)

このエラーの理由は次のとおりです:マニフェストファイルには、正しい MIME タイプ (「text/cache-manifest」) を構成する必要があります。 Web サーバー上で設定する必要があります。サーバーごとに異なります

この方法では、この時点でネットワークが切断されていても、それらのファイルには引き続きアクセスできます

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

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

キャッシュマニフェストの基本

アプリケーションキャッシュを有効にするには、ドキュメントの <html> を確認してください。マニフェスト属性:

\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

指定されたマニフェストを持つ各ページは、ユーザーがアクセスするとキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェストファイルで直接指定されていない限り)。

マニフェストファイルの推奨ファイル拡張子は「.appcache」です。

マニフェストファイルは正しい MIME タイプ、つまり「text/cache-manifest」で構成する必要があることに注意してください。 Web サーバー上で設定する必要があります。

マニフェストファイル

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

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

キャッシュマニフェスト - この見出しの下にリストされているファイルは最初のダウンロード後にキャッシュされます

ネットワーク - この見出しの下にリストされているファイルはサーバーへの接続が必要であり、キャッシュされません

フォールバック- この見出しの下にリストされているファイルは、ページにアクセスできない場合 (404 ページなど) のフォールバックページを指定します。

CACHE MANIFEST

最初の行である CACHE MANIFEST は必須です:

CACHE MANIFEST
/theme.css
/ logo.gif
/main.js

上記のマニフェストファイルには、CSS ファイル、GIF 画像、JavaScript ファイルの 3 つのリソースがリストされています。マニフェストファイルが読み込まれると、ブラウザはこれら 3 つのファイルを Web サイトのルートディレクトリからダウンロードします。その後、ユーザーがインターネットから切断しても、これらのリソースは引き続き使用できます。

NETWORK

次のNETWORKセクションは、ファイル「login.php」が決してキャッシュされず、オフラインで利用できないことを指定します:

NETWORK:
login.php

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

NETWORK:
*

FALLBACK

以下の FALLBACK セクションでは、インターネット接続が確立できない場合、/html5/ ディレクトリ内のすべてのファイルが "offline.html" に置き換えられることを指定しています:

フォールバック:
/html/ /offline.html

注: 最初の URI はリソースで、2 番目の URI は代替です。

キャッシュを更新する

アプリがキャッシュされると、次のことが起こるまでキャッシュされたままになります:

ユーザーがブラウザーのキャッシュをクリアする

マニフェストファイルが変更される(以下のヒントを参照)

プログラムによってアプリのキャッシュを更新する

例 - 完全なマニフェストファイル

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/ html / /offline.html

ヒント: 「#」で始まる行はコメント行ですが、他の目的にも使用できます。アプリケーションのキャッシュは、マニフェストファイルが変更されると更新されます。画像を編集したり、JavaScript 関数を変更したりしても、これらの変更は再キャッシュされません。コメント行の日付とバージョン番号を更新すると、ブラウザにファイルが再キャッシュされます。

アプリケーションキャッシュに関する注意事項

キャッシュの内容にご注意ください。

ファイルがキャッシュされると、サーバー上のファイルを変更したとしても、ブラウザにはキャッシュされたバージョンが表示され続けます。ブラウザのキャッシュを確実に更新するには、マニフェストファイルを更新する必要があります。

注: ブラウザーによって、キャッシュされたデータの容量制限が異なる場合があります (ブラウザーによっては、サイトごとに 5MB の制限を設定している場合があります)。

学び続ける

新しいファイル

<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="" width="336" height="69"></p> <p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>

提出するリセットコード

自動運転