ブラウザにcss、javascriptなどを更新させる

XAMPPを通じてWordpressのソースコードに基づいたウェブサイトを開発しています。CSSコードやスクリプトなどを変更すると、ブラウザが変更を適用するのに時間がかかることがあります。これにより、複数のブラウザを使用して1つを更新することになります。新しいスタイルが適用されない場合は、2つ目のブラウザを試してみますが、これは常にこれです。

この問題を回避する方法はありますか？以前の変更に気付かずにコードを変更することがあります。

一般的な解決策

Ctrl+ F5（またはCtrl+ Shift+ R）を押して、キャッシュを強制的に再ロードします。私はMacが使用信じますCmd+ Shift+ R。

PHP

PHPでは、有効期限をヘッダー付きの過去の時刻に設定することで、キャッシュを無効にできます。

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

クロム

Chromeのキャッシュを無効にするには、で開発ツールを開き、F12右下隅にある歯車のアイコンをクリックして、次のように設定ダイアログで[キャッシュを無効にする]を選択します。

^{この回答から取られた画像。}

Firefox

about:configURLバーに入力し、「network.http.use-cache。」というタイトルのエントリを見つけます。これをに設定しfalseます。

クライアント側でそれを避けたい?v=1.x場合は、ファイルの内容が変更されたときに、cssファイルリンクのようなものを追加できます。たとえば、これに<link rel="stylesheet" type="text/css" href="css-file-name.css">変更できる場合は、<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">キャッシュをバイパスします。

あなたがphpを書くことができるなら、あなたは書くことができます：

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

いつもリフレッシュします！

編集：もちろん、これをすべてに手動で追加することはないので、Webサイト全体にとって実際には実用的ではありません。

これを確認してください：ブラウザにスタイルシートの最新バージョンを使用させるにはどうすればよいですか？

cssファイルがfoo.cssであるとすると、以下に示すようにクエリ文字列を追加することで、クライアントに最新バージョンを使用させることができます。

<link rel="stylesheet" href="foo.css?v=1.1">

開発者の視点
（元の質問のように）開発モードの場合、最善のアプローチは、HTMLメタタグを介してブラウザーでのキャッシュを無効にすることです。このアプローチをユニバーサルにするには、以下に示すように、少なくとも3つのメタタグを挿入する必要があります。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

このように、開発者はページを更新するだけで変更を確認できます。しかし、本番環境ではそのコードにコメントすることを忘れないでください。結局のところ、キャッシュはクライアントにとって良いことです。

本番モード
本番環境ではキャッシュを許可し、クライアントはフルリロードやその他のトリックを強制する方法を知る必要がないため、ブラウザが新しいファイルをロードすることを保証する必要があります。はい、この場合、私が知っている最善のアプローチは、ファイルの名前を変更することです。

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

変更すると更新されます。

これがDNSから発生していないことを確認してください。たとえば、Cloudflareには開発モードをオンにできる機能があり、Cloudflareは高速キャッシュを提供するため、スタイルシートと画像を強制的にパージします。これにより、無効になり、誰かがサイトにアクセスするたびに強制的に更新されます。

ブラウザのキャッシュをクリアしてみてください。

FirefoxのWeb開発者ツールバーを使用してキャッシュをオフにすることができます。

このFirefox拡張機能は、私が機能する唯一のソリューションでした：https： //addons.mozilla.org/en-us/firefox/addon/css-reloader/

上記の受け入れられた答えは正しいです。ただし、キャッシュを定期的にリロードするだけで、Firefoxを使用している場合は、Web開発ツール（2015年11月現在の[ツール]メニュー項目の下）にネットワークオプションがあります。これには、リロードボタンが含まれます。キャッシュを一度オフにリセットするには、[リロード]を選択します。

これらのファイルがすべてのユーザーに対してChromeによって適切に更新されることを確認したい場合must-revalidateは、Cache-Controlヘッダーに含める。これにより、Chromeはファイルを再チェックして、ファイルを再フェッチする必要があるかどうかを確認します。

次の応答ヘッダーを推奨します。

Cache-Control: must-validate

これにより、Chromeはサーバーに確認し、新しいファイルがあるかどうかを確認するように指示されます。新しいファイルがある場合は、応答でそれを受け取ります。そうでない場合は、304応答を受け取り、キャッシュ内の応答が最新であることが保証されます。

このヘッダーを設定しない場合、ファイルを無効にする他の設定がない場合、Chromeはサーバーに新しいバージョンがあるかどうかを確認しません。

これは、この問題についてさらに説明しているブログ投稿です。

html-headの外部cssファイルへのリンクタグの代わりに、php-includeを使用します。

<style>
<?php
include("style.css");
?>      
</style>

一種のハックですが、私にとってはうまくいきます:)

ブラウザは新しいバージョンのcssファイルとjsファイルをチェックしないため、変更を加えるたびにcssディレクトリとjsディレクトリの名前を変更することにしました。ディレクトリ名はcss1〜css9、js1〜js9を使用しています。9になったら、次に1からやり直します。苦痛ですが、毎回完璧に機能します。ユーザーにタイプするように言わなければならないのはばかげています。

何千ものクライアントに影響を与えるスタイルシートをリモートで作成および変更できる必要がある場合がありますが、ネットワーク負荷が高くなるリスクがあるため、キャッシュをオフにしません。

HTMLの内容をリモートで変更できるので、スタイルシートをスタイルシートの内容と一致するハッシュコードにリンクします。

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

そうは言っても、HTMLコンテンツが変更されたときに、クライアント側のjavascript関数を使用してノードと属性を慎重に置き換えます。つまり、スタイルシートのリンクタグは置き換えられず、href属性のみが変更されます。

このシナリオは、WindowsのChrome、Firefox、Edge、AndroidのChromeでも正常に機能しますが、驚いたことに、AndroidのWebクライアントでは常に機能するとは限りません。だから私は多かれ少なかれjavascriptを使用して更新を強制/トリガーするものを探しています-最適にはページをリロードする必要はありません。

Firefox / Chrome開発者ツールバーを使用できます。

1. オープンDevのツールバーCtrl+ Shift+I
2. ネットワークタブに移動します
3. [キャッシュを無効にする]チェックボックスを押します（Firefox：ツールバーの右上、Chrome：ツールバーの上部中央）

これを試して：

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

'？'の後に何かが必要な場合 これは、ページにアクセスするたびに異なり、それtime()を実行します。これをコードに永続的に残すことは、ページの読み込みを遅くするだけで、おそらく必要ないため、実際には良い考えではありません。

ページのレイアウトに大幅な変更を加えた場合、スタイルシートを強制的に更新すると便利であり、新しいスタイルシートにアクセスすることは、画面に何か意味のあるものを表示するために不可欠であることがわかりました。