javascript - クライアントにJavaScriptファイルを更新させるにはどうすればよいですか？

Question

現在、プライベートベータ版で作業しているため、まだかなり迅速な変更を行っていますが、明らかに使用量が増え始めているため、このプロセスは遅くなります。そうは言っても、私たちが直面している問題の1つは、新しいJavaScriptファイルで更新をプッシュした後も、クライアントブラウザーはキャッシュされたバージョンのファイルを使用し、更新が表示されないことです。明らかに、サポートコールではctrlF5、サーバーから最新のファイルを確実に取得するために更新を行うように通知することができますが、それ以前にこれを処理することをお勧めします。

現在の考えは、JavaScriptファイルの名前にバージョン番号を付けるだけで、変更が加えられたら、スクリプトのバージョンをインクリメントして、すべての参照を更新することです。これで確実に作業が完了しますが、リリースごとに参照を更新するのは面倒になる可能性があります。

私たちがこれに対処する最初の人ではないと確信しているので、私はそれをコミュニティに捨てると思いました。コードを更新するときに、クライアントがキャッシュを更新することをどのように保証していますか？上記の方法を使用している場合、変更を簡素化するプロセスを使用していますか？

score 586 · Accepted Answer

私の知る限り、一般的な解決策は?<version>、スクリプトのsrcリンクにを追加することです。

例えば：

<script type="text/javascript" src="myfile.js?1500"></script>

この時点で、すべてのスクリプトタグでこれらの「バージョン番号」をインクリメントするためのfind-replaceよりも良い方法はないと思いますか？

あなたはバージョン管理システムにあなたのためにそれをしてもらうかもしれませんか？ほとんどのバージョン管理システムには、たとえばチェックイン時にリビジョン番号を自動的に挿入する方法があります。

次のようになります。

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

もちろん、このようなより良い解決策は常にあります。

score 106 · Accepted Answer

URL に現在の時刻を追加することは、確かに一般的な解決策です。ただし、必要に応じて、これを Web サーバーレベルで管理することもできます。サーバーは、javascript ファイルに対して異なる HTTP ヘッダーを送信するように構成できます。

たとえば、ファイルを強制的に 1 日以内にキャッシュするには、次のように送信します。

Cache-Control: max-age=86400, must-revalidate

ベータ版の場合、ユーザーに常に最新のものを取得させたい場合は、次を使用します。

Cache-Control: no-cache, must-revalidate

score 46 · Accepted Answer

Google Page-Speed: 静的リソースの URL にクエリ文字列を含めないでください。ほとんどのプロキシ、特にバージョン 3.0 までの Squid は、「?」でリソースをキャッシュしません。Cache-control: public ヘッダーが応答に存在する場合でも、URL に含まれます。これらのリソースのプロキシキャッシュを有効にするには、静的リソースへの参照からクエリ文字列を削除し、代わりにパラメーターをファイル名自体にエンコードします。

この場合、URL ex: http://abc.com/ v1.2 /script.js にバージョンを含め、Apache mod_rewrite を使用してリンクをhttp://abc.com/script.jsにリダイレクトします。バージョンを変更すると、クライアントブラウザは新しいファイルを更新します。

score 36 · Accepted Answer

この使用法は廃止されました: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

この回答は 6 年しか遅れていませんが、多くの場所でこの回答を目にすることはありません... HTML5 では、この問題を解決するために使用されるアプリケーションキャッシュが導入されました。私が書いていた新しいサーバーコードが、人々のブラウザーに保存されている古い JavaScript をクラッシュさせていることがわかったので、それらの JavaScript を期限切れにする方法を見つけたいと思いました。次のようなマニフェストファイルを使用します。

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

ユーザーがキャッシュを更新するたびに、新しいタイムスタンプでこのファイルを生成します。補足として、これを追加すると、マニフェストが指示するまで、ブラウザーは (ユーザーがページを更新しても) リロードしません。

score 35 · Accepted Answer

ファイルサイズをロードパラメータとして追加するのはどうですか?

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

したがって、ファイルを更新するたびに、「filever」パラメーターが変更されます。

ファイルを更新し、更新の結果が同じファイルサイズになった場合はどうですか? オッズは何ですか？

score 20 · Accepted Answer

すべてのブラウザーが「?」を含むファイルをキャッシュするわけではありません。初期化。可能な限りキャッシュされるようにするために行ったことは、ファイル名にバージョンを含めたことです。

だから代わりにstuff.js?123、私はやったstuff_123.js

私はmod_redirect（私が思うに）Apacheでto to have stuff_*.jsto goを使用しましたstuff.js

score 12 · Accepted Answer

ASP.NETページの場合、次を使用しています

前

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

AFTER (強制リロード)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

DateTime.Now.Ticks を追加すると、非常にうまく機能します。

score 6 · Accepted Answer

JSファイルにリンクするページを生成する場合、簡単な解決策は、生成されたリンクにファイルの最終変更タイムスタンプを追加することです。

これはHuppieの答えと非常に似ていますが、キーワード置換なしのバージョン管理システムで機能します。また、ファイルがまったく変更されていない場合でもキャッシュが妨げられるため、現在の時刻を追加するよりも優れています。

score 6 · Accepted Answer

PHPの場合:

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

HTMLの場合:

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

使い方：

HTML ではfilepath、関数内でのみ行うように名前と名前を記述します。PHP はファイルのを取得し、最新の変更filetimeのを返しますfilepath+name+"?"+time

score 4 · Accepted Answer

jQuery 関数 getScript を使用して、ページが読み込まれるたびに js ファイルが確実に読み込まれるようにすることもできます。

これが私がやった方法です：

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

http://api.jquery.com/jQuery.getScript/で機能を確認してください。

デフォルトでは、$.getScript() はキャッシュ設定を false に設定します。これにより、タイムスタンプ付きのクエリパラメータがリクエスト URL に追加され、リクエストされるたびにブラウザがスクリプトをダウンロードするようになります。

score 3 · Accepted Answer

私の同僚は、 http： //www.stefanhayden.com/blog/2006/04/03/css-caching-hack/に（cssを参照して）投稿した直後に、そのメソッドへの参照を見つけました。他の人がそれを使用していて、それが機能しているように見えるのを見るのは良いことです。この時点で、すべてのスクリプトタグでこれらの「バージョン番号」をインクリメントするためのfind-replaceよりも良い方法はないと思いますか？

score 2 · Accepted Answer

フレームワーク固有ですが、Django 1.4には、上記の回答の「greenfelt」サイトと同様に機能するstaticfilesアプリ機能があります。

score 2 · Accepted Answer

1 つの解決策は、リソースをフェッチするときに、タイムスタンプを含むクエリ文字列を URL に追加することです。これは、クエリ文字列を含む URL からフェッチされたリソースをブラウザがキャッシュしないという事実を利用しています。

ただし、ブラウザがこれらのリソースをまったくキャッシュしないようにしたくない場合があります。ファイルをキャッシュしたいという可能性の方が高いのですが、新しいバージョンのファイルが利用可能になったときにブラウザーにフェッチしてもらいたいと考えています。

最も一般的な解決策は、ファイル名自体にタイムスタンプまたはリビジョン番号を埋め込むことです。正しいファイルを要求するようにコードを変更する必要があるため、これはもう少し手間がかかりますが、たとえば、バージョン 8 をリリースするまでsnazzy_javascript_file.js(すなわちsnazzy_javascript_file_7.js) のバージョン 7 がブラウザーにキャッシュされ、その後コードが次のように変更されることを意味します。代わりにフェッチsnazzy_javascript_file_8.jsします。

score 2 · Accepted Answer

バージョンGET変数を使用して、ブラウザーのキャッシュを防止します。

URL の末尾に追加?v=AUTO_INCREMENT_VERSIONすると、ブラウザーのキャッシュが防止され、キャッシュされたすべてのスクリプトが回避されます。

score 2 · Accepted Answer

file.js?V=1aよりも aを使用する利点は、fileV1.js複数のバージョンの JavaScript ファイルをサーバーに保存する必要がないことです。

私が目にする問題file.js?V=1は、新しいバージョンのライブラリユーティリティを使用すると壊れる別の JavaScript ファイルに依存コードがある可能性があることです。

下位互換性のために、必要に応じて古いページをアップグレードする準備が整うまでjQuery.1.3.js、新しいページにはを使用し、既存のページにはを使用する方がはるかに良いと思います。jQuery.1.1.js

score 1 · Accepted Answer

1つの簡単な方法。htaccess を編集

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

score 0 · Accepted Answer

最も簡単な解決策は？ブラウザにキャッシュさせないでください。現在の時刻 (ミリ秒単位) をクエリとして追加します。

（あなたはまだベータ版なので、パフォーマンスを最適化しないという合理的なケースを作ることができます.しかし、YMMVはここにあります.）

javascript - クライアントにJavaScriptファイルを更新させるにはどうすればよいですか？

28 に答える 28

Related

Reference