テクノモンキーのアプリ開発日記

テクノモンキーの開発ブログです。iOS、Android、Unity、Cocos2d-xなどアプリ開発関連のTipsやアプリ開発に役立つ情報を発信します。

Webページのcss、javascriptの変更を正しく反映させる為のキャッシュ対策

前に、ブラウザのキャッシュでWebページの修正が正しく反映されない場合にスーパーリロードするっていう方法を紹介しました。

develop.hateblo.jp



スーパーリロードを使えばキャッシュクリアして強制的にロードする事ができるので、最新のページの状態をロードできますが、自分以外の誰かが訪問した場合だと、スーパーリロードしてくれる人はなかなかいないと思いますし、キャッシュされているサイトの状態が最新のものだと判断されてしまう場合があります。
なので今回は今回はcssjavascriptの変更を正しく反映させる為のキャッシュ対策をメモしておきたいと思います。


cssjavascriptの変更を正しく反映させる為のキャッシュ対策

cssjavascriptの変更を正しく反映させたい場合は、以下のようにcssjavascriptのパス指定にパラメータをつけて、変更した場合にこのパラメータ変更して行けばいいようです。
パラメータをつけると、cssjavascriptに変更があったと判断されてキャッシュを見ずに最新のファイルをロードしてくれます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
 <!-- css・javascriptにパラメータを付与する -->
<link rel="stylesheet" href="../common/css/common.css?100">
<script type="text/javascript" src="../common/js/common.js?200"></script>
</head>
<body>
</body>
</html>

Webページを更新する度にパラメータを変更する必要はないかもですが、キャッシュにより意図しない挙動をする場合が結構あるので、定期的に更新して行った方がよさそうです。