web-dev-qa-db-ja.com

applicationCacheにキャッシュされたファイルの再読み込みを強制する

HTML5 applicationCacheを使用して、ページの多くのJavascript、CSS、画像などのファイルを保存しています。これらのファイルの1つを更新しても、ブラウザがそのファイルを再読み込みすることはありません。私は以下を試しました：

  • ページの読み込み時にapplicationCache.update（）を呼び出す
  • ApplicationCacheのupdatereadyイベントをリッスンし、swapCache（）とwindow.location.reload（）を呼び出します
  • マニフェストファイル自体にタイムスタンプコメントを追加して、ブラウザにマニフェストが変更されたことを認識させる

確かにこれはこれほど難しいことではありません。キャッシュされたファイルを再要求するようにブラウザを説得するにはどうすればよいですか？

htmlofflineoffline-modeapplication-cache
17
Ben Dilts

新しい（または変更された）ファイルを強制的にダウンロードするには、マニフェストファイルを更新する必要があります（バージョン番号のコメントを追加しないと、変更が加えられます）。おそらく何が起こっているのかというと、エラーが発生しているということです。最も一般的なのは、適切なmimeタイプ（_text/cache-manifest_）でマニフェストを提供していない可能性があることです。サーバーを正しく構成しましたか？これを確認する最も簡単な方法は、Chromeでページを開き、コンソールとAppCacheの下のリソースタブを見て、エラーがあるかどうかを確認することです（ファイルが提供されていることについて文句を言います）間違っています。curl-Iコマンドを使用してテストすることもできます。

_curl -I $manifest_file_URL
_

マニフェストファイルがキャッシュされている可能性もあります（すぐに期限切れになるように期限切れヘッダーを設定できます）。また、再読み込みの順序にも注意してください。ページは最初にAppCacheから読み込まれ（存在する場合）、次にブラウザがマニフェストファイルが更新されているかどうかを確認します。そうである場合は、ダウンロードして新しいバージョンのキャッシュに配置しますが、これによってページが自動的に更新されることはなく（swapCache()も）、（少なくとも）ページをもう一度更新する必要があります。

トピックの詳細については、 このプレゼンテーション も参照してください。

13
Peter Lubbers

Google Chromeでは、デバッグ中にこれを行うだけの場合、簡単な回避策があります。シークレットウィンドウを使用します。キャッシュ内の何かを変更するときは、シークレットウィンドウを閉じ（複数ある場合は、必ずすべて閉じてください）、再度開いてアプリケーションに移動します。これで、変更したすべてのファイルを含め、cleanからダウンロードされます。

保存されているすべてのデータが破壊されるため、少し核となるオプションですが、たとえばCSSを整理するプロセスでは問題なく機能します。

何らかの理由で、「閲覧データの消去」を使用してChromeのページキャッシュを消去しても機能しないようです。

7
xgretsch

「キャッシュマニフェストファイル自体を変更する必要があります。これは、1文字を変更するのと同じくらい簡単です」と感謝します。

2
chulian

マニフェストファイルのHTTPヘッダーを

'Cache-Control' to 'no-store'

.manifestのContent-Typeを追加します

'text/cache-manifest'

そうしないと、ブラウザは設定したキャッシュのデフォルトに対してマニフェスト自体をキャッシュするため、マニフェストをチェックするリクエストはキャッシュされたコピーを取得します。

その後、マニフェストファイルの文字を変更すると、次のリクエストで新しいマニフェストがフェッチされます。

実行しているサーバーはわかりませんが、S3バケットからホストされているファイルに対してこれを実行しました。これにより、S3は通常24時間キャッシュされます。

1
Nico Westerdale

私はしばらくこれに苦労しました。私にとって重要なのは、mimeタイプを取得し、nginxを介してヘッダーをキャッシュすることでした。

/etc/nginx/mime.types内：

text/cache-manifest                   manifest appcache;

/etc/nginx/nginx.conf内：

      # If the file exists as a static file serve it directly
      if (-f $request_filename) {
        expires -1;
        break;
      }

Expires -1行により、キャッシュヘッダーがno-cacheに設定されます。

また、Firefox 23でキャッシュをクリアするために、次のものを使用しました。

  • Firefox->オプション->オプション->詳細設定->ネットワーク：オフラインWebなど->今すぐクリア

そして、サーバーから何がフェッチされているかを確認するには、次のようにします。

  • Firefox-> Webオプション->ツール->ネットワークタブ
1
user2795195