キャッシュとは
使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。
Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか（あるいは両方か）意識しておきましょう。
- ブラウザのキャッシュ：そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。
- キャッシュサーバのキャッシュ：不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。
キャッシュの制御方法
✏️ HTTPレスポンスヘッダ で制御
➡️ Cache-Control ヘッダ
ブラウザやキャッシュサーバに対して、キャッシュの動作や有効期限を指定するためのものです。
| ディレクティブ（コマンド） | 説明 |
|---|---|
| must-revalidate | キャッシュが期限切れだった場合、オリジンサーバでの確認無しにキャッシュを利用してはならない |
| no-cache | オリジンサーバでの確認無しにキャッシュを利用してはならない |
| no-store | リクエスト、レスポンスの一切を保存してはならない |
| no-transform | 中継者は形式変換してはならない（画像の再圧縮等を防ぐ） |
| public | 複数ユーザーで共有できるようにキャッシュしてよい（主にキャッシュサーバ） |
| private | 特定ユーザーだけが使えるようにキャッシュしてよい（主にブラウザ） |
| proxy-revalidate | privateキャッシュには適用されないことを除き、must-revalidateと同じ |
| max-age | キャッシュの有効期限を設定する（秒数） |
| s-maxage | 共有キャッシュにおいて、max-ageディレクティブまたはExpiresヘッダで指定された値を上書きする |
➡️ Expires ヘッダ
Expires "Mon, 26 Jul 1997 05:00:00 GMT"
キャッシュの有効期限を指定します。Cache-Control: max-age と同じですが、 Google Developers によると、
より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします
とのこと。
➡️ ETag ヘッダ
同じファイルかどうか比較するための検証子です。一意に識別する値（バージョンやコンテンツハッシュ）を設定。ブラウザからのIf-None-Match リクエストヘッダと比較判断します。
➡️ Last-Modified ヘッダ
同じファイルかどうか比較するための検証子です。最後に改変された日付時刻を設定。ブラウザからのIf-Modified-Since リクエストヘッダと比較判断します。
ETagとLast-Modifiedは両方指定すると冗長になるので、どちらかだけでOK。
➡️ Vary ヘッダ
指定したヘッダ（言語、ユーザーエージェント等）毎に応答表現が変わることを伝えます。
これにより、例えば同一URLでPC向け・スマホ向けページを出し分けている場合、それぞれでキャッシュを持つことが出来ます。
✏️ HTMLの<meta>タグで制御
HTML4.xでは<meta>タグでブラウザキャッシュの制御が可能です。(ただしキャッシュサーバのキャッシュを使用してしまう可能性は残ります。）
- キャッシュさせない
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
- キャッシュの有効期限を設定
<meta http-equiv="Expires" content="Tue, 16 Feb 2016 14:25:27 GMT">
HTML5ではhttp-equiv属性に対してキャッシュに関するキーワードを設定することは出来ません。
Pragma directives corresponding to headers that affect the HTTP processing model (e.g. caching) must not be registered
なおWebアプリをオフラインで使う目的で策定が進められていたApplication cache APIは廃止予定 とのことです。