ホームページ > 記事 > ウェブフロントエンド > H5キャッシュマニフェストの使用

H5キャッシュマニフェストの使用

php中世界最好的语言オリジナル: 2018-03-16 11:25:442709ブラウズ

今回は、H5 キャッシュマニフェストの使用方法について説明します。H5 キャッシュマニフェストを使用する際の注意点は何ですか? 以下は実際のケースです。アプリの

Update

h5ページでキャッシュの問題が発生しています。デフォルトでは、何もしなくても、アプリにはページをキャッシュするための一定量のスペースが確保されます。アップデートは起動直後にロードされ、アプリのキャッシュ領域が利用可能な場合、アップデートはダウンロードされません。 Android はキャッシュ領域をクリアできますが、iOS はアンインストールと再インストールしかできません (冗談ですか?)。これは最悪のシナリオですが、アドレスを変更することができます。 no-cache

これに気づいた後、ページは no-cache を追加しました。

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

はブラウザにページをキャッシュしないように指示します。実際、ページが変更されていない場合、リクエストは 304 ですが、ページが変更されている場合、リクエストは 200 です。したがって、キャッシュなしを追加することは、毎回完全にダウンロードされることを意味するのではなく、再度ダウンロードされることを意味します。更新されたとき。しかし現時点では、携帯電話ごとにパフォーマンスが異なります。 4sと6spは違います。同じページにアクセスして js を変更します。 4sはアップデートされましたが、6spはそのままです。サーバー側にキャッシュがまだ残っているため、それを修正する方法。まずnginxキャッシュを設定します:

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

そしてnginxを再起動する必要があります:

nginx -s reload

今回は6spもアップデートされました。

ただし、nginx を常に再起動することは解決策ではなく、一部のリクエストが失われる可能性があります。そしてこの場合、オフラインではまったく使用できません。例えば、インターネットが切断された状態でメッセージを送信しようとすると、当初設定されていた赤いビックリマーク付きの絵やキャラクターのアバターが表示されなくなります。もちろん、この問題は、base64

string

に変換することで解決できます。 Base64 は非常に長いため、どこに配置してもスペースを占有します。それを解決する方法は、マニフェスト

キャッシュなし+更新ファイル名+テスト対象の更新アドレス

マニフェスト

導入については、最初にw3shoolを読むことができます: http://www.w3school.com.cn/html5 /html_5_app_cache.asp、ここで使用方法について説明します。

1. html

<html manifest="index.appcache">

を設定します

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

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

3. nginx mimeを設定します

text/cache-manifest         appcache;

mimeタイプのファイルはすべてconfディレクトリにあります。 nginx起動後。この時点で、ページが読み込まれます:

この図は 2 つのことを示しています。1 つは、index.appcache が最初にダウンロードされ、次に checking イベント、download イベント、progress イベント、および updateReady イベントがトリガーされることです。 2 つ目は、現在のページがデフォルトでキャッシュされることです。そして実際にはパラメータを受け取り、それをキャッシュします。異なるアドレスを持つ現在のページがキャッシュされている限りのようです（上記のキャッシュディレクトリにzeptoを1つだけ書き込んだだけです）。ページを再度更新します:

Index.appcache が更新されていない場合、チェックはトリガーされません。

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

ステータス

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

ただし、この場所では削除できません。アプリケーションのストレージをクリアする必要があります。

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

最もわかりやすいのはデフォルトでキャッシュされるホームページです。このとき、index.appacheを変更せずにホームページの内容を変更しても効果はありません。たとえば、js の

reference

を削除しても、クライアントは引き続き js をダウンロードします。このとき、このキャッシュファイルを変更する必要があります:

#不需要缓存的页面
NETWORK:  
mobile/index.html
*

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！