2019年4月2日火曜日

ウェブページの絵が更新されない

ちょくちょく使っている自作ウェブページで、
周期的に画像を変更するようなことをしており、
PCで見る限り普通に動作しているのですが、
AndroidスマートフォンのChromeブラウザで見ると
ずっと同じ画像が表示されてます。なぜ?

原因はすぐに思い当たります。ブラウザ側のキャッシュです。
スマートフォンのような通信コストが高い端末では、
節約のためなるべく通信しないようにするのが理想です。
ということで更新されない静的コンテンツはキャッシュして
以後のアクセスではそちらを使いまわすようにすると。

しかしファイル的には静的コンテンツとしての画像であっても、
カメラで撮影した画像のようにリアルタイムで
内容が変わるものだってあるのです。

もちろんブラウザ側の操作でキャッシュを削除する方法はあるものの、
深い階層の奥底にあるのでいちいちやってられません。
ということでコンテンツ側で何とかならないものかと。

キャッシュさせないといえばhtml文書のheadタグ内に
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
とか入れるのが私の知る定石ですが、
これはあくまでもそのhtml文書自体についての設定。
JPEG画像なんかはどうするんだ?

と思ったら普通に設定ファイルで可能とのこと。
特定のディレクトリにあるJPEG画像(拡張子"jpg")のみが対象なら
そこに置いた設定ファイル".htaccess"によるオーバーレイが可能で、
<Files ~ "\.(jpg)$">
Header set Pragma no-cache
Header set Cache-Control no-cache
</Files>
のように書いておけば良いようです。
エラーになるようなら
# a2enmod headers
# service apache2 restart
の実行も必要かも。
しかしAndroidのChromeには効果がありませんでした。
AndroidのChromeは頑なにキャッシュしてくれます。

他の方法を探して見つけたのがリンク先のファイル指定時に
パラメーターを渡す方法です。
リンク先への遷移時、GETメソッドでは
ファイル名の直後に"?"を追加し続けて引数を並べたりします。
htmlファイルにおけるフォームの文字列設定に使ったりしますが、
これを静止画のjpgファイルに応用したものです。
やり方は簡単でhtml文書内に画像"pic.jpg"を張り込む際
<img src="./pic.jpg?tekitounamojiretsu" />
のように適当なパラメーターを渡すことです。
これによりブラウザに動的コンテンツと認識させ
キャッシュをさせないようにすることができます。
実はこの手はhtmlファイルについては結構使っていて、
パラメーターが空でも、すなわち"?"を追加するだけで
期待通りの動作をしてくれます。

しかしAndroidのChromeには効果がありません。
こいつにキャッシュを無視させるには
パラメーターが毎回異なるようにしなければなりません。
クライアントサイドのJava Scriptで
なんとかする方法はあるでしょうが、
今回問題になっているコンテンツは
サーバーサイドのPHPスクリプトなので
<img src="./pic.jpg?<? echo date("YmdHis");?>" />
のようにアクセス日時を秒まで入れてやれば
毎アクセス時にことなるパラメーターとなり解決できました。
しかしこの方法は完全に静的なhtmlでやるのは厳しい。
できればファイル名の直後に"?"がついてれば
キャッシュ無効ぐらいで勘弁してもらいたいものです。

0 件のコメント:

コメントを投稿