スモールビジネスのIT日誌

• (2021-04-15 10:44:06)

昨日の「○月○日オープン」のwebページは注意を要する の続き・・

(1) キャッシュさせないメタタグ

サーバー側をライブにしても、顧客側のブラウザでライブにならないトラブルの対策として、このページhtmlには下記のメタタグを入れている。

効いているのか、効いていないのか、私の環境ではあまり意味がないようだ。

＜meta http-equiv="Pragma" content="no-cache"＞
＜meta http-equiv="Cache-Control" content="no-cache"＞
＜meta http-equiv="Expires" content="0"＞

(2) htaccessでキャッシュ無効化

下記の例は「html、php、css、js」をキャッシュさせない記述。

＜Files ~ "\.(html|php|css|js)$"＞
Header add Pragma "no-cache"
Header set Cache-Control no-cache
＜/Files＞

画像(jpg、gif、png)もさせたくないときは
＜Files ~ "\.(html|php|jpe?g|gif|png|css|js|pdf)$"＞

今回、これは入れてなかった。

キャッシュの保持時間やユーザーやブラウザによって違うので、すべてをカバーできるわけでないが、オープン1週間前くらいには仕込んでおくべきかな。

テストした範囲では効いているので、次回の本番で効果を見てみたい。

(3) クエリパラメータで別ファイル化(css、js、画像ファイル)

URLの一番末尾に「?」ではじまる文字列を追加する方法。

末尾「?」以下はクエリパラメータと呼ばれる。

たとえば、この記事のURLは下記のとおり：

https://www.tokyocafe.net/slog/?eid=850

「?eid=850」の部分がクエリパラメータ。

クエリパラメータとはURL内で、検索用の「検索フィールド」と「検索値」を挿入する手法と空想している。

「?」+ クエリパラメータ +「=」+ パラメータ値

クエリパラメータ付きURLは平文htmlにも使用可能で、平文の場合「?」以下は無視される。

しかし、ユーザーブラウザにはクエリパラメータごとにユニークな「違うURL」と認識されるらしい。

そこで、これを使用することで、新しいURLと見なさせキャッシュ防止の効果があるとのこと。

ネット検索すると「○○.css」ファイルや「○○.js」ファイルのファイル名を、html文内でクエリパラメータ化することでキャッシュ防止のテクニックを解説してくれているページが多数ある。

(例)

＜script src="base.js?p=(new Date()).getTime()"＞＜/script＞

＜link rel="stylesheet" href="./○○.css?＜?php echo date('Ymd_Hi'); ?＞" type="text/css"＞

→ たとえば、4月15日10時45分なら、下記となる：
＜link rel="stylesheet" href="./○○.css?20210415_1045" type="text/css"＞

この例だと、1分単位で「○○.css」は新しい別のファイルと見なされる。

「Y=年数」「m=月」「d=日」「H=時間」「i=分」「s=秒」。

htmlファイル更新時はどうする？

ここで疑問はhtmlファイル更新したとき、どうやってブラウザに更新を知らせるのか？

上の方法はcssファイルとjsファイルの更新時の話。

cssが更新されたら、そのリンク元のhtmlも(更新した)と見なされるのか？

それはないと思うが・・

検索しても、「○○.html」ファイルをクエリパラメータ化する記事は見いだせなかった。

「○○.css?XXX」より「○○.html?XXX」のはずだが・・

なぜなんだろう、cssも変更することはあるが、同じ頻度もしくはcssよりもhtmlファイルの更新頻度が高い。

キャンペーン前の商品設定の変更などはhtmlの変更が多いと思う。

ならば、htmlファイルにクエリパラメータを付けて、メインの流入をユニークなURLにする方が確実に思える。

しかし、流入リンクの多さや、検索エンジンのリンクは操作できないなど、リンク元の「○○.html?XXX」が広範囲でコントロールしにくいという事情があるのか。

(4) JavaScriptでスーパーリロード

Chromeなどの多くのブラウザは「Ctrl + F5」でスーパーリロードが実行される。

これをユーザーでなく、JavaScriptを使用してブラウザに自動的にさせるとよい気がする。

→ location.reload(true);

(Macもこれでスーパーリロードされるのか知らんが、たぶん、行くだろう)

次の記事のコードはそのまま使えそう：
webサイト訪問者に一度だけスーパーリロードをしてもらう


docCookies.setItem("temp", "true"); //適当なcookieの書き込みを行い、
if("true" == docCookies.getItem("temp")){ //正常に利用できる環境であれば実行
if("true" != docCookies.getItem("refresh")){ //初回訪問時は実行される
docCookies.setItem("refresh", "true"); //2回目以降はcookieに値が書き込まれているので実行されない
docCookies.removeItem("temp");
location.reload(true); //ブラウザのキャッシュを使わずにリロードを実行
}else{
docCookies.removeItem("temp");
}
}

スーパーリロードで買物カゴもリセット？

スーパーリロードはcookieを削除しないか？という問題が脳裏をかすめた。

cookieが消えると、買物カゴからも入れている商品が失われる。

Chromeで試した範囲では削除されなかった。

しかし、他のバージョンやMacやiOSではどういう挙動になるか不明なので、他に方法があるならしたくない。

結論

テストしてみたら、現状では「htaccessによるキャッシュ無効化」で効果が出ているようである。

他の手法は必要に応じて、部分的に採用したい。