htmlのキャッシュを無効にする方法

webページ変更を反映しても、クライアントから「ページ変わってないんですけど？」とか連絡来るのはweb屋のあるある。

毎回「キャッシュなので再読み込みして下さい」って答えるの面倒。いっそキャッシュ無効にしてやるとか思います。(本当は良くない)

公開webページのキャッシュを無効にするのはユーザーアクセシビリティ的に問題ですが、動的なページとか製造中のページなどでどうしても無効にしたい場合があるので調べてみた。

HTML4までの書き方

HTMLの<head>～</head>内に以下を記述

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

しかし！これが使えるのはhtml4(HTTP1.0,HTTP1.1)まで。

ちなみに、no-cacheはキャッシュを使うなって意味でキャッシュはされるよう(使わないだけ)。キャッシュを無効はno-storeらしい。

どうでもいいわそんなこと！今からはhtml5の時代、HTTP2.0の時代じゃ！！

HTML5ではApplication Cache(appcache)でhtml要素のmanifestで指定する。

<!DOCTYPE html>
<html lang="ja" manifest="my.appcache">

my.appcacheの書き方

CACHE MANIFEST
#version:1.0.0
CACHE:
index.js
index.css

NETWORK:
*

これでindex.jsとindex.cssはキャッシュされない。

しかし！このappcacheは非推奨になったようだ・・・

結局どうすればよいのか？

非推奨なら当分はappcacheが使えるはず、今後はどうしたらいいのか・・

解決方法がわかれば追記します(T_T)

phpなどのcgiが利用できるのならEtagで対応できるようだ。サーバとEtagが同じであれば304 not modifiedを返し、異なれば200を返す。304だとキャッシュを利用する。(HTTPのリクエストヘッダの話)

<?php header('Etag:' . time()); ?>

phpで上記のheaderを返せば1秒毎にEtagが変わる仕組み。今度実験してみよう。。