PCのブラウザにはある強制リロード。
しかしスマホのブラウザにはなく、設定からキャッシュを削除とかめんどくさい手順が必要となります。
製作中のサイトの修正をお客さんにチェックしてもらうとき、スマホのブラウザがCSSの更新を認識してくれず、「修正されてません」と言われてしまうことがしばしば・・・。
でもスマホの設定でキャッシュを削除する作業をお客さんにしてもらうのは難しいし、何よりそれを説明するのも自分が煩わしくてめんどくさい。
いろいろ調べてみたら、ちょっとした一文をHTMLに仕込むだけで、強制リロードしなくても常に最新のCSSや画像を読み込んでくれる方法を発見しました。
あくまで裏ワザ的な内容で、おそらく正しい方法ではありませんが、とりあえずお客さんとの校正やり取りの間はこれで切り抜けることができます。
神の裏ワザ・GETパラメーター
HTMLのヘッダーや、CSSの画像指定部分にGETパラメーターをつけるだけで、ブラウザは毎回新しい内容だと思って読み込んでくれます。
GETパラメーターはパスの最後に付く「?=〇〇」の形の記述です。詳しくはググってくださいｗｗ
CSSを修正したとき
HTMLのヘッダ内で外部スタイルシートを指定するとき、通常はこういう感じで書きますね。
<link rel="stylesheet" href="style.css">
この記述のファイル名の最後にGETパラメーターでバージョン情報をつけてあげるのです。
<link rel="stylesheet" href="style.css?ver=1.0.1">
「?ver=1.0.1」の部分がGETパラメーターになります。バージョンは適当なのでダミーでもOK。
CSSを変更したら、バージョンの末尾の数字を増やしてあげれば、ブラウザは新しい内容だと思って再読み込みしてくれます。
画像を修正したとき
画像を修正したのに、スマホのブラウザが古い画像を表示してしまう！というときも裏ワザ発動で解決できます。
画像の指定は、通常このように書きますね。
<img src="image.png" />
この画像のパスにも、GETパラメーターを付けてやります
<img src="image.png?ver=1.0.1" />
画像にバージョンなんてありゃしないのですが、この一文をつけるだけで、ブラウザは新しい画像になったと思い最新の状態に再読み込みしてくれます。
CSSのときと同様、画像を修正したらそのつどGETパラメーターに書かれたバージョンの数字を上げてからサーバにあげればOK。
まとめ
これまで、お客さんのブラウザのキャッシュが古い問題で、何度ムダなやりとりを重ねてきたことでしょう。
しかしこの方法により一気に解決し、ストレスがなくなりました。
ただ、100％正しい方法とは言えないと思いますので、もし使う場合は自己責任でお願いいたしますm(__)m
