クライアントからキャッシュクリアさせないとデーターが新しくならない事に不服申し立てがあった。（石浦家具）

この記事おくったからかも

https://www.kbs-web.com/solution/item/hpinfo/cash.html

キャッシュはいつ消えるの？

先述したキャッシュのクリア（削除）はあくまであなたのパソコンのキャッシュを削除したに過ぎず、他のパソコンのキャッシュを消すことはできません。

キャッシュが消えるタイミングはブラウザの設定やインターネットの利用頻度によって異なるため、いつ消えるということは一概に言えません。一定期間で消える場合もあれば、一定の容量を超えたら古いデータから消えていくなどさまざまです。

いずれにしても最近見たサイトがキャッシュとして残るため、初めての訪問者や久しぶりの訪問者にはきちんと更新されたデータが表示されます。

→この記事の後もいろいろ試したり聞いてみたが、結論から言うとキャッシュにあるデーターを削除する方法は見いだせなかった。今後キャッシュさせない方法や最新状態をリクエストする機能はあったが、アクセス時にブラウザに溜まったキャッシュをクリアして最新状態で表示方法は分からなかった。社長が石浦さんと話してブラウザのキャッシュをユーザーがクリアしないと更新が変わらない件は、そこまでやるにはシステム導入と費用がかかると話をして先方も理解し、現状維持となった。

キャッシュクリアしなくてもいいようにキャッシュ自体を封じる方法。

この方法を取る前に読み込まれてしまったものはローカルでキャッシュされているためにどうすることもできないが、（たぶんcontent=”no-store, max-age=0“でブラウザのキャッシュが強制的に再検証されるが..。）今後ページに新規でアクセスする方にはキャッシュさせない方法により常に新しい情報を見てもらえる。

↑読み込まれた過去のものはこの状態では変わらなかった。html5ではサポートされないから。

meta要素にno-cacheを追記する
(html5では効かないが一応)

<!–ブラウザにキャッシュさせない設定–>
<meta http-equiv=”Pragma” content=”no-cache”>
<meta http-equiv=”Cache-Control” content=”no-cache, max-age=0“>
<meta http-equiv=”Expires” content=”0″>

※max-age=0

no-store ディレクティブは、新しいリソースがキャッシュされることを防ぎますが、過去のリクエストの結果としてキャッシュ済みの古いリソースが応答するのを防ぐことはできません。 max-age=0 を設定すると、キャッシュが強制的に再検証されます（キャッシュがクリアされます）。

https://www.tagindex.com/html_tag/page/meta_pragma.html

meta要素で、文書のキャッシュを無効にすることができます。この要素はhead要素の中で使用します。

この指定により、常に最新の情報が表示されるようになることが期待されます。
ですが、環境によっては、この指定を行った場合でもキャッシュから読み込まれてしまうケースがあるようです。


<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

http-equiv=”Pragma” の指定
属性	値	説明
`http-equiv=""`	`Pragma`	`Pragma` は `Cache-Control` に対応していない環境向けの指定となります
`content=""`	`no-cache`	キャッシュを無効にする

http-equiv=”Cache-Control” の指定
属性	値	説明
`http-equiv=""`	`Cache-Control`	キャッシュを制御
`content=""`	`no-cache`	コンテンツに変更がある場合はキャッシュを使わない（キャッシュ自体は行われる）
`content=""`	`no-store`	キャッシュさせない

Cache-Control の no-cache は、コンテンツに変更がある場合は最新の情報を読み込むが、変更がない場合はキャッシュから読み込む、という指定になります。

この指定がうまく機能しない場合は、同時にキャッシュの有効期限も指定してみてください。（下記使用例を参照）

使用例

同時にキャッシュの有効期限を指定した例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>文書のタイトル</title>
</head>
<body>



</body>
</html>

http://www.tohoho-web.com/ex/draft/nocache.htm

<meta http-equiv=”Expires” content=”0″>

キャッシュの有効期限
設定値を0に設定すると、即有効期限切れにするため、キャッシュしていない状態とほぼ同等になる。
ただし、これに対応されていないブラウザも存在するため、確実なものではない。

この要素で指定した日時、または秒数後に、ブラウザのキャッシュから文書の情報が消去されます。

http://www.ne.jp/asahi/spring/season/OtherTips/no-cache.html

既に読み込まれてキャッシュされているコンテンツについてはどうなる？

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

http://www.tohoho-web.com/html/meta.htm

<meta http-equiv=”Cache-Control” content=”no-store,max-age=0“>

<meta http-equiv="Cache-Control" content="s-maxage=60,max-age=120">

↑読み込まれた過去のものはこの状態では変わらなかった。

HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】

クライアントにキャッシュの削除をお願いしなくて済む方法

【実務で必須】クライアントにキャッシュの削除をお願いしなくて済む方法

URLパラメータ（GETパラメータ）を付ける

それではいよいよ本題です。

URLパラメータ・・・何やら難しそうな単語に聞こえますが、やる事は至って簡単です。

例えばcssの読み込みをするときは次のように書くと思います。

<link href="css/style.css" rel="stylesheet" />

それをこのように書けばOKです。

<link href="css/style.css?ver=1.0.1" rel="stylesheet" />

拡張子の後に?を付けてその後に適当にVer名や日付などを書きます。

?以降の書き方に決まりはないので、分かりやすいように書いておきましょう。

日付の場合だと次のようになります。

<link href="css/style.css?202006021" rel="stylesheet" />

この数値を変えるとブラウザは別のファイルだと認識するので、キャッシュが保持されていても問題ありません。

またjsやimgタグでも同様です。

<script src="js/main.js?ver=1.0.1"></script>

<img src="img/profile.png?20200621" alt=""/>

これでファイル名が同じままでもキャッシュを削除する必要がなくなります（更新するたびにファイル名を変えるわけにはいきませんからね）

WordPressの場合

WordPressの場合は以下のようにcssやjsをfunctions.phpから読み込んでいる人が多いと思います。

<?php
  function my_script_init()
  { wp_enqueue_script( 'main', get_template_directory_uri() .'/js/main.js', array( 'jquery' ), '1.0.1', true );
    wp_enqueue_style( 'style-name', get_template_directory_uri() .'/css/style.css', array(), '1.0.1' );
  }
  add_action('wp_enqueue_scripts', 'my_script_init');
?>

この場合は拡張子の後ではなく、第4引数にある1.01がバージョン名にあたります。

更新するごとにこの数値を変えていけばOKです。

以上です。

やっている事は簡単ですがクライアントに負担をかけさせず、自分も無駄に時間を消費しないで済むのでぜひ活用しましょう。

https://note.ju-5.com/archives/80

https://taishon.nagoya/browser-cache-delete/

キャッシュバスティング　CacheBusting

https://anchoco.me/html-js-cache-busting/

クエリパラメータを使う

クエリパラメータはwebサイト制作時のテクニックとなります。

例えばhtmlに以下のような画像を表示する記述があったとします。

<img src="logo.png" alt="ロゴです">

画像を新しいものに差し替える場合、logo.pngの画像ファイルを上書きするだけでよいでしょうか？

答えはnoで、前述のキャッシュの仕組みがあるため、ユーザーによっては画像が変更されない可能性があります。

そこで、以下のような記述にします。画像名にクエスチョンマーク以降に文字列を追加します。

<img src="logo.png?ver1.0" alt="ロゴです">

設定する文字列はなんでもよいのですが、この記述によりブラウザでは画像ファイル名が変わったとみなし、画像ファイルを新しくダウンロードしてくれるようになります。jsやcssを更新する場合、ひどいとサイトが表示されなかったり表示崩れが起きる可能性もあります。

webサイトは不特定多数がアクセスしてくるものですので、配慮したいですね。

長くなりましたが、クライアント側キャッシュの注意点でした。

https://kds-info.jp/blog/%E3%80%8C%E3%81%82%E3%80%81%E3%81%9D%E3%82%8C%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82%E3%80%8D%E3%81%A8%E3%81%AF%E3%82%82%E3%81%86%E3%82%AA%E3%82%B5%E3%83%A9/

パラメータとは？

パラメータとは､サーバーに情報を送るためにURLに付け加える変数のことを言います｡
(変数？なんだそれ・・。)

まぁ細かいところは、今回も割愛いたしますが、
ざっくりお伝えすると、

クエッションマーク (?) をURLの末尾に付けることで、「変数(パラメータ)＝値」の形式で、

サーバーに送信するデータをURLに含めることができると覚えといてください。

キャッシュクリアの方法

実はこれ。imageだけではなくCSSやJSにも活用できます。

し　か　も！

やり方はかんたんです！

読み込む静的ソースのファイルパスの後に「？」と任意の文字列を追加するだけ！

百聞は一見に如かずということで、下記がソースです。

imageファイルの場合

1	<img src=“/hogehoge.jpg?20190806”>

CSSファイルの場合

1	<style type=“text/css” href=“css/hogehoge.css?20190806”>

JSファイルの場合

1	<script type=“text/javascript” src=“/js/hogehoge.js?20190806”>

という具合にファイル名の末に?を付けるだけで、
ブラウザに新しいファイルとして認識され、それまでキャッシュされていたリソースがクリアされます。

ちなみに、この方法は楽天などのECモールでも使えます！

(くぅーーーーッ！嬉しい！)

ちなみにこの「?」以降の文字列は実はどんなものでも大丈夫です。

「?yamada」でも「?kds」でも自分で管理しやすい任意の表記でも大丈夫です！

ただ一人で運用していくならまぁ自分がわかればいいですが、

いつ付与されたパラメータかをメンバー全員が把握する為にも私山田的には「?20190901」や「?day=20190901」みたいなわかりやすいものがオススメです！

パラメータを使うときの注意点

キャッシュを付与している状態で画像を更新すると、「あれ？また変わんない・・・。」となってしまいます。

それもそうで、画像が変わらないのはずっと前回付与したパラメータを読み込んでいるからです。

そういう時は、

[?01]→[?02]

な具合で、このパラメータの文字を変更してください

PHPを使えば、動的にパラメーターを付与することもできます。
ここでは詳しく書きませんので、気になる方は

「PHP パラメータ　付与」

で検索してみてください。

.htaccessでも設定可能

https://www.kbs-web.com/solution/item/hpinfo/nocash.html

.「.htaccess」でキャッシュを残さない設定をする

※注意

.htaccessはサーバーによっては設定・変更・設置が不可であったり、設置したことでサイトに大きな影響を与える場合があります。設定・変更・設置は自己責任でお願いいたします。

新規に設置する場合

メモ帳などのエディタを開きます。

以下のコードを貼り付けます。

<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

名前をつけて保存からファイル名を「.htaccess」、ファイル種類を「すべてのファイル」にして保存します。
トップページがあるフォルダへアップロードします。

既に.htaccessがある場合

.htaccessをダウンロードします。コピーペーストしてバックアップを取っておくことをお勧めします。
.htaccessをメモ帳などのエディタで開きます。

以下のコードを追加で貼り付けます。

<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

保存します。
元の場所へアップロードします。

これでほぼすべてのファイルがキャッシュされなくなります。

ただしこの設定はキャッシュを消す設定ではなく、キャッシュさせなくさせる設定です。そのためキャッシュが消えるまでは、古いデータが表示される場合があります。

コードについて

コードについて詳しく解説します。

<Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

コードの2、3行目はキャッシュさせない設定です。

1行目はどのファイルに対する命令か記述します。

上記の場合ですと、html,php,jpeg,jpg,gif,png,css,js,pdfのファイルを指定しています。

例えば「画像やPDFはキャッシュさせておき、変更があれば別名でアップロードするからhtmlだけキャッシュしなければいい」という場合は以下のようになります。

<Files ~ "\.(html)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

例えば「PHPとCSSとJSはめったに変えないから、よく変えるhtmlと画像とPDFだけキャッシュしなければいい」という場合は以下のようになります。

<Files ~ "\.(html|jpe?g|gif|png|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>

※htmlやphpをキャッシュさせない指定をすると、メールフォームなどで確認画面から入力画面に戻った時に入力した項目が消えるケースがありますのでご注意ください。

サイトや運用方法に合わせた方法をとりましょう。

キャッシュの有効期限設定

https://konoti.com/website/seo/browser-cache.html

キャッシュの設定方法

サーバー側で.htaccessが設定可能な場合、ExpiresヘッダーやCache-Control ヘッダーを使って、キャッシュの有効期限を設定することができます。

Expiresヘッダーでは有効期限を年月日時で指定します。一方Cache-Controlヘッダーの場合は、日時指定ではなく、サーバーがレスポンスを受け取ってからキャッシュを削除するまでの期間を秒数で指定します。
また、.htaccessを設定せずとも、HTMLソースのhead内にmetaタグとしてcache-controlやexpireを設定することで、有効期限を設定することができます。

Chromeのデベロッパーツールでキャッシュの有効期限を調べる方法

https://www.wp-benricho.com/chrome-dev-cache/

キャッシュとは？ブラウザキャッシュのメリットと有効期限の設定方法

https://monokoto68.com/clear-the-cache/