ブラウザにCSSとJavaScriptの変更が表示されるようにするにはどうすればよいですか？

Question

CSSファイルとJavascriptファイルは頻繁に変更されないので、それらをWebブラウザでキャッシュします。しかし、私はまた、ユーザーがブラウザのキャッシュをクリアすることなく、これらのファイルに加えられた変更をWebブラウザが見られるようにしたい。また、Subversionなどのバージョン管理システムでうまく動作するソリューションが必要です。

---

私が見てきたいくつかの解決策は、クエリ文字列の形式で、ファイルの末尾にバージョン番号を追加伴います。

はあなたのためにこれを自動化するためにSVNのリビジョン番号を使用することができます。ASP.NET Display SVN Revision Number

はあなたが別のファイルのRevision変数を含める方法を指定することはできますか？これはHTMLファイルにあり、リビジョン番号をURLにCSSまたはJavascriptファイルに含めることができます。

Subversion bookにはリビジョン：「このキーワードは、このファイルがリポジトリで変更された最後の既知のリビジョンを示します」と記載されています。

Firefoxはまた、特定のページ上のすべてをリロードするCTRL +Rを押すことができます。

明確にするために、ユーザーが自分で何かをする必要がないソリューションを探しています。

Answer 1

ファイルの最終更新タイムスタンプをURLの最後に追加すると、ブラウザはファイルが変更されたときにファイルを要求することがわかりました。 PHPでの例：

function urlmtime($url) { 
    $parsed_url = parse_url($url); 
    $path = $parsed_url['path']; 

    if ($path[0] == "/") { 
     $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path; 
    } else { 
     $filename = $path; 
    } 

    if (!file_exists($filename)) { 
     // If not a file then use the current time 
     $lastModified = date('YmdHis'); 
    } else { 
     $lastModified = date('YmdHis', filemtime($filename)); 
    } 

    if (strpos($url, '?') === false) { 
     $url .= '?ts=' . $lastModified; 
    } else { 
     $url .= '&ts=' . $lastModified; 
    } 

    return $url; 
} 

function include_css($css_url, $media='all') { 
    // According to Yahoo, using link allows for progressive 
    // rendering in IE where as @import url($css_url) does not 
    echo '<link rel="stylesheet" type="text/css" media="' . 
     $media . '" href="' . urlmtime($css_url) . '">'."\n"; 
} 

function include_javascript($javascript_url) { 
    echo '<script type="text/javascript" src="' . urlmtime($javascript_url) . 
     '"></script>'."\n"; 
} 

Answer 2

私が見てきたいくつかの解決策は、クエリ文字列の形式で、ファイルの末尾にバージョン番号を追加伴います。

<script type="text/javascript" src="funkycode.js?v1"> 

あなたはv1は上記の表示される場所の後にHTMLファイルにLastChangedRevision単語を含むことによって、このfor youを自動化するためにSVNのリビジョン番号を使用することができます。これを行うには、リポジトリもセットアップする必要があります。

私の答えがさらに明確になることを願っていますか？

Firefoxはまた、特定のページ上のすべてをリロードするCTRL +Rを押すことができます。

Answer 3

私の意見では、バージョン番号をファイル自体の一部とする方が良いです。 myscript.1.2.3.js。このファイルを永久にキャッシュするようにWebサーバーを設定し、新しいバージョンがある場合は新しいjsファイルを追加するだけです。

Answer 4

あなたのCSSやJSライブラリの新しいバージョンをリリースすると、次が発生する原因：

1. にライブラリを参照するHTMLファイルを変更するユニークなバージョン文字列
2. が含まれるようにファイル名を変更バージョン管理されたファイル

でポイント今

あなたは有効期限を設定することができます（これは通常、リリーススクリプトのためにかなり単純な問題です） CSS/JSが将来的には年を取ることになります。コンテンツを変更するたびに、参照元のHTMLが新しいURIを指している場合、ブラウザは古いキャッシュされたコピーを使用しなくなります。

これにより、ユーザーが何もせずに必要なキャッシング動作が発生します。

Answer 5

私はグラムの答えを見つけたときに、これをどうやって行うのかと思っていました。コードをありがとう。

コードの使用方法を理解するのに苦労しました。 （私はバージョンコントロールシステムを使用しません）要約すると、スタイルシートを呼び出すときにタイムスタンプ（ts）を含めます。スタイルシートを頻繁に変更する予定はありません。

<?php 
    include ('grom_file.php'); 
    // timestamp on the filename has to be updated manually 
    include_css('_stylesheets/style.css?ts=20080912162813', 'all'); 
?>