hostgatorで実行しているアプリケーションがあります。jsファイルに変更を加えると、ユーザーはキャッシュをクリアするまで変更を確認できません。これは、アプリケーションに変更をプッシュする唯一のオプションですか?基本的に、変更を加えてファイルを更新してから、すべてのユーザーにキャッシュをクリアするように要求することになっていますか?
6 に答える
ファイルインクルードでバージョン管理を使用する必要があります。ファイルインクルードのURIを変更するたびに、ブラウザは一致するキャッシュを検出せず、インクルードを再ダウンロードします。
例えば:
<script type="text/javascript" src="include/232/init.js"></script>
ここで、232は変更可能なバージョン番号であり、新しいコードをリリースするたびに変更する必要があります。
または、クエリ文字列を使用することもできます。
<script type="text/javascript" src="include/init.js?232"></script>
重要なのは、訪問者にファイルを再ダウンロードさせたいときはいつでも、何らかの方法でファイルインクルードURIを変更する必要があるということです。
PHPまたは別のサーバー側言語を使用している場合は、ファイルに含まれるものが変更されるたびに自動的に発生するようにこのバージョン管理を設定できます:http: //derek.io/blog/2009/auto-versioning-javascript-and-css-files/
アセットURLにダミーのクエリ文字列を追加できます。
<link href="http://mysite.com/main.css?v=1" rel="stylesheet" />
次に、CSSに変更を加えるときはいつでも、バージョン番号を上げるだけです。
この手法は、キャッシュバスティングと呼ばれます。それをグーグルで検索すると、さまざまなバリエーションが得られます。
link
これを回避するための1つのトリックは、 Javascript呼び出しに、ある種のバージョンまたはタイムスタンプを含むクエリ文字列を追加することです。例えば:
<script src="myexternal.js?20130116" type="text/javascript"></script>
この例は単純ですが、要点を証明しています。基本的に、これはブラウザにフルパスを認識しない場合にファイルをロードするように指示します。javascriptファイルを変更し、ユーザーに最新バージョンを取得してもらいたい場合は、疑問符(クエリ文字列)の後のタイムスタンプまたは値を更新するだけです。
クライアントのブラウザのキャッシュをクリアすることはできませんが、ファイルにバージョン管理を追加するなどのキャッシュ無効化手法を使用することはできます
<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />
そして、あなたが変更を加えるとき
<link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />
タイムスタンプなど、何でもかまいませんが、異なる必要があります。
私が時々使用する簡単なトリックは、JavaScript/CSSファイルのパスにいくつかのダミーパラメータを追加することです。ブラウザは基本的に別のURLを認識し、キャッシュされたバージョンを使用しません。
$jsFile = '/js/myFile.js'; // probably cached
$jsFile = '/js/myFile.js?r='.time(); // won't ever be cached
クライアントのキャッシュを実際にクリアすることはできませんが、クライアントのブラウザをだまして、このファイルが表示されるのはこれが初めてであり、再度ダウンロードされると思わせることができます。
安定版に到達したら、これを無効にすることを忘れないでください。ファイルのキャッシュは、アプリケーションの読み込み時間を短縮するための優れた方法です。
この問題を回避するために使用するトリックは、更新されたスクリプトのURLを変更することです。これにより、リソース名が異なるため、クライアントはスクリプトを再度ダウンロードする必要があります。
それを行う最も簡単な方法:URLの最後にバージョン番号を使用しますjs/my-script.js?v=1.0
。
それを行うためのより良い方法(すべてのナビゲーターで100%サポートされています):ファイル名自体を変更しますjs/my-script.v1.0.js
。