質問: githubページで一からサイトを作っている初心者です。 --- ● 質問: ブラウザキャッシュの持てる期間はどのくらいか知りたいです。 1.ブラウザを再起動すると消えてしまうのか。PC・スマホそれぞれ知りたいです。 2.PC・スマホを再起動すると消えてしまうのか。 3.上記それぞれブラウザに依存するのか、もしくは、ブラウザの設定等で変わるものなのか。デフォルトはあるのか。 --- ● 簡単な条件: サーバー側はキャッシュに関して期限を定めません。キャッシュは残すものとします。サーバー側にもキャッシュがあり、コンテンツを更新すると自動でサーバー側のキャッシュがクリアされるように設定されています。 (おそらくgithubページはこんな感じかな...と。間違ってたらすみません。ご指摘いただけると助かります。) --- ● なぜこの質問をしたのか: 画像を多く含むサイトを作ろうと思っています。そこでなるべくユーザーにキャッシュを利用してもらいたいと思ったからです。もちろん最初は仕方ないのですが、次の日もう一度アクセスした時など、どうなのかな...と。 --- 自分なりに調べてみたのですが、検索ワードが悪いのか、 なかなか納得のいく説明が見つかっていない状況です。 どうかお力添えいただけると嬉しいです。 よろしくお願いいたします。
回答: ブラウザーがどのようにキャッシュするかは、ブラウザーの設定とHTTPレスポンスヘッダーによって決まります。 一般的にはHTTPレスポンスヘッダーよりもブラウザーの設定が優先します。例えばシークレットモードするとウィンドウを閉じるとキャッシュは削除されてしまいます。 ブラウザーの設定は、既定では自動モードになっているので、通常はHTTPレスポンスヘッダーによってどのようにキャッシュするかが決まります。GitHub Pages の場合は、HTTPレスポンスヘッダーをブラウザーで調べると以下のようになっていました。 ``` cache-control max-age=600 date Mon, 06 Aug 2018 09:15:03 GMT expires Mon, 06 Aug 2018 08:07:43 GMT ``` キャシュされる時間は、`max-age=600`となっているので600秒(10分)です。また、`expires`(有効期限)が過去に設定されているので、キャッシュされていても更新の確認が行われます。なお、HTTPキャシュの詳しい説明はMDNの該当のページをみてください。 一般的には`max-age`を大きくすればキャッシュの時間を延長(推奨は1年まで)できるのですが、GitHub Pages で長くできるかというと、HTTP ヘッダーを変更する機能がないので変更できないようです。(参考 英語版 Github pages, HTTP headers) 最近のブラウザー(IE11を除く)では、HTTPキャッシュ以外にサービスワーカーを使うことでもキャッシュをすることができます。サービスワーカーを使えば、単にキャッシュするだけでなくオフラインでも動作させることができるようになったりキャッシュの仕方を細かく設定できるので、HTTPキャッシュよりも機能的にはずっと上になります。JavaScriptでscriptを書く必要がありますが、HTTPSに対応しているWebサーバーであればいいので GitHub Pages でも使うことができます。慣れてきたら、サービスワーカーを勉強すればいいと思います。