web-dev-qa-db-ja.com

WebページのCSSキャッシュを防ぐ方法は？

私はxhtml、css Webページの開発を学んでいます。多くの場合、CSSで変更を行っていますが、ブラウザーのキャッシュのため、ページに反映されません。手動でクリアすると、最新のコード効果が表示されます。ブローカーがキャッシュしないようにするためにコードに入れることができるものはありますか？アドバイスをお願いします

asp.net.nethtmlcssxhtml
20
haansi

ランダムなクエリパラメータをスタイルシートのURLに追加できます（たとえば、JavaScriptまたはサーバー側のコードを介して）。読み込まれているcssファイルは変更されませんが、ブラウザーが別のURLを検出してキャッシュされたスタイルシートを読み込まないため、キャッシュができなくなります。

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
35
magnattic

アプリケーションのバージョン（またはビルド番号やビルド日付など）を返すGetVersionメソッドでクラスを作成できます。

マークアップのasp.netアプリケーションの場合は、次のように指定できます。

<script src="Scripts/some.js?version=<%= Common.GetVersion%>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/styles/Style.css?version=<%= Common.GetVersion%>" />

静的ファイルへのURLの一部がビルドごとに（または少なくともすべてのバージョンで）変更されるため、これによりブラウザーはファイルをリロードします。

4
Maxim Kornilov

Chromeを開発ブラウザーとして使用している場合、2つのオプションがあります。

1）ページの再読み込みボタンを1秒間押し続けると、メニューが表示され、ハードページの再読み込みが可能になります。

2）インスペクタ設定で、ブラウザにファイルをキャッシュしないように強制できます。

enter image description here

サーバーの構成よりもブラウザーのキャッシュを無効にする方が、この問題を処理する方が簡単で、速く、問題が少ないと思います。

3
frenchie

キャッチなし：以下のように、CSSパスの最後に変更可能な文字列を配置します。

<link rel="stylesheet" type="text/css" href="style.css?2016-12-3:10 13 30"/>

バージョンの変更時に更新：

<link rel="stylesheet" type="text/css" href="style.css?v=1.1.0"/>
2
Kris Roofe

リンクにはランダムなバージョンIDを使用できます。たとえばこれを使用します：

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

myStyle.cssは、スタイルシートファイルであり、DateTime.Now.ToString（ "yyyyMMddhhmmss"）関数を使用して、ランダムな異なるバージョンIDを生成します。このランダムなバージョンIDを使用することにより、ブラウザーはCSSのリロードを強制されました。

1
hojjat.mi

これは、.htaccessファイルを使用して行うことができます。このコードをWebサイトのルートにある.htaccessという名前のファイルに配置します。

<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
0
Wes Cossick

ASP.netタグも質問に含まれているので、Maxim Kornilovの答えを拡張したいと思います（ https://stackoverflow.com/a/12992813/903783 ）ASP.net MVCでURLをwebapp-build-specificにするという彼のアイデアをどのように使用したか（この例は、MVCおよびRazor Pagesの新しいRazor構文ではなくASP/ASP.net WebForms構文にありました）：

1）Global.asax.csのwebappのメインクラス（以前はMvcApplicationと呼ばれていました）に追加されました

#region Versioning

public static string Version => typeof(MvcApplication).Assembly.GetName().Version.ToString(); //note: syntax requires C# version >=6

public static DateTime LastUpdated => File.GetLastWriteTime(typeof(MvcApplication).Assembly.Location);

#endregion

someProperty => someReadOnlyExpression構文は、C＃6以降、someProperty {get {return ...;}}の省略形にすぎません

2）Content/_Layout.cshtmlファイルで、ページフッターにビルド番号とビルド日時（Webアプリケーションのメインアセンブリに基づく）を表示するために以下を使用していました：

Version @ViewContext.Controller.GetType().Assembly.GetName().Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", @File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location)))

私はより簡単に変更しました：

Version @somewebappname.MvcApplication.Version (@string.Format("{0:yyyy/MM/dd-HH:mm:ss}", somewebappname.MvcApplication.LastUpdated))

3）_Layout.cshtmlのハードコードされたリンクを介してCSSをロードしていました（まだリファクタリングしています）。

<link href='@Url.Content("~/Content/Site.css?version=" + somewebappname.MvcApplication.Version)' rel="stylesheet" type="text/css" />

したがって、ウェブページを右クリックしてソースを表示すると、次のようになります。

<link href='/Content/Site.css?version=2.1.5435.22633' rel="stylesheet" type="text/css" />

つまり、CSS urlは、ダミーパラメータバージョンのおかげでバージョン固有です。

乱数が代わりに使用された場合、特にページロードごとにCSSがフェッチされますが、これは通常は望ましくありません。特に、個々のページ変更をWebサーバーに変更するのではなく、新しいWebアプリケーションビルドをすでにプッシュしている場合（ビルドにアクセスできるようにするため） URLに挿入できる番号）。

ビルド番号の自動インクリメントを実現するために、Properties/AssemblyInfo.csにあることに注意してください（ 自動インクリメントバージョン番号を取得するには（Visual Studio）？ ）：

// Version information for an Assembly consists of the following four values:
//
//      Major Version
//      Minor Version 
//      Build Number
//      Revision
//
// You can specify all the values or you can default the Revision and Build Numbers 
// by using the '*' as shown below:
[Assembly: AssemblyVersion("1.0.*")]
//[Assembly: AssemblyFileVersion("1.0.*")] //don't use boh AssemblyVersion and AssemblyFileVersion with auto-increment
0
George Birbilis

htmlを使用して_<link>_タグを記述する代わりに、phpコードを使用します。最後に_<link>_タグ内でphp mt_Rand()関数を使用すると、乱数が生成されるため、スタイルシートがキャッシュされることはありません。 <?php echo "<link rel='stylesheet' type='text/css' href='style.css?'".mt_Rand().">"; ?>

0
Muhammad Taif Khan