H5キャッシュ - マニフェストのサンプルコード共有（画像とテキスト）-H5 チュートリアル-php.cn

H5キャッシュ - マニフェストのサンプルコード共有（画像とテキスト）

黄舟

リリース： 2017-04-01 11:56:23

オリジナル

2424 人が閲覧しました

アプリ内 h5 ページを更新すると、常にキャッシュの問題が発生します。デフォルトでは、アプリにはページをキャッシュするための一定の容量があり、アプリのキャッシュスペースが利用可能になるとすぐにロードされますが、Android ではキャッシュスペースをクリアできません。アンインストールして再インストールすることしかできません (冗談ですか?) これは最悪のケースですが、

no-cache

これに気づいた後、ページは no-cache を追加します。、ページが変更されるとリクエストは 304 になり、ページが変更されるとリクエストは 200 になります。したがって、キャッシュなしを追加するということは、毎回再度ダウンロードされることを意味するわけではありません。ただし、現時点では、4s と 6sp ではパフォーマンスが異なります。4s は更新されますが、6sp は同じです。キャッシュ:

<meta http-equiv="Cache-Control" content="no-cache">

ログイン後にコピー

があり、再起動する必要があります。nginx:

 location / {
           root   html;           expires -1;
           index  index.html index.htm;
        }

ログイン後にコピー

6sp もこの時点で更新されています

ただし、nginx を常に再起動することは解決策ではなく、この場合、一部のリクエストが失われる可能性があります。 , ネットワークが切断されると完全に使用できなくなります。もちろん、Base64 の文字列

に変換することで、この問題は解決されます。どこに配置されても問題を解決するにはどうすればよいですか? .cn/html5/html_5_app_cache.asp、ここではその使用方法について説明します

1. html

nginx -s reload

ログイン後にコピー

を設定します2. キャッシュディレクトリを設定します

<html manifest="index.appcache">

ログイン後にコピー

3. nginx mimeを設定します

CACHE MANIFEST
#v1.0.0.0#需要缓存的文件js/zepto.js#不需要缓存的页面
NETWORK:*#无法访问页面
FALLBACK404.html

ログイン後にコピー

mimeタイプのファイルはすべてこの時点で、ページは次のようにロードされます:

この図は 2 つのことを示しています。1 つは、プロセスで最初にindex.appcacheがダウンロードされ、次にチェックイベント、ダウンロードイベント、および進捗イベントがダウンロードされることです。 update

Readyイベントが次々にトリガーされます。もう1つは、現在のページがデフォルトでキャッシュされることです。そして、実際には、異なるアドレスを持つ現在のページがキャッシュされるようです（zeptoを1つだけ書きました）。上記のキャッシュディレクトリ内):

Index.appcache は更新されません。チェックはトリガーされません。

キャッシュされたファイルをロードします

ステータス

は 200 で、サイズ列はキャッシュからのものです。ブラウザから読み込まれるものは 304、1 つは数ミリ秒、もう 1 つは 10 ミリ秒以上です。 F12 キーを押すと開発者モードになり、キャッシュされたファイルが [アプリケーションキャッシュ] 列に表示されます。

ただし、この場所ではクリーニングできません。アプリケーションのクリア

ストレージでクリーニングする必要があります。

キャッシュされたファイルを更新する

最もわかりやすいのはホームページで、デフォルトでキャッシュされます。このとき、index.appacheを変更せずにホームページの内容を変更しても効果はありません。たとえば、js の reference を削除しても、クライアントは引き続き js をダウンロードします。このとき、このキャッシュファイルを変更する必要があります:

text/cache-manifest         appcache;

ログイン後にコピー

Index.appache と Index は同じレベルにありますが、index.html を記述することはできず、Web サイトと同等のパスを記述する必要があることに注意してください。他のリソースにも当てはまります。この時点で更新がトリガーされますが、ページにはまだキャッシュされたリソースが読み込まれているため、別のプロセスを実行する必要があります:

  window.applicationCache.addEventListener("updateready", function(){
    location.reload()
  });

ログイン後にコピー

这样才会加载最新的页面。如果首页再发生修改，可以随意(加个空格，加空行)修改缓存文件，就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式，框架js，图片)缓存下来，经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。当然，如果无所谓消息或者reload的影响。no-cache还是很方便，毕竟这个index.appache一旦加上，难以去掉，除非清理缓存。

以上がH5キャッシュ - マニフェストのサンプルコード共有（画像とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。