キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる(JavaとJSP編)

PAK85_MBAdesagyou20140312_TP_V

このブログで唯一アクセス数を稼いでいるキャッシュのお話。
前回はPHPだったけど、今回は必要に迫られてJSPとJavaで。

目的は前回と同じ。
cssやjsファイルを更新したのに、キャッシュのせいでうまく反映されないイライラを解消するためのTips。
条件は以下の通り。

  • サイトはJSPとJavaで開発している
  • 対象はcssファイル、js(javascript)ファイル
  • レスポンス向上のため、キャッシュは利用する
  • ファイルを修正した際、ユーザにキャッシュクリアをさせなくても、修正した内容は確実に反映される
  • 対象ファイル(この場合css、jsファイル)以外の修正は行わない

さて、本題。
 

キャッシュを利用する

によって割愛。

 

修正した内容を確実に反映させる

こう言うとき、定番のやり方は修正するたびにファイル名を変更したり、パラメータを付加したりする。
こんな感じ。

<link href="css/default.css?date=20131012" rel="stylesheet">

上記の例ではcssファイルの後ろにパラメータで日付を付加している。
cssファイルを修正した場合は、この日付を変更することでキャッシュを使えなくしている。
ただ、これだとhtml側を修正する必要があるし、何より頻繁に修正する開発環境ではかなりメンドい。
また、html側の修正を忘れると言う凡ミスも誘発する。

 

対象ファイル以外の修正は行わない

と、いうわけで対象ファイルの変更日付を自動的に取得してしまう仕掛けをjavaで作成する。

/** 最終更新日時取得用書式定義 */
public class Util {
	/**
	 * ファイルの最終更新日時を返す
	 * @param path 対象となるファイル
	 * @return 最終更新日時(yyyyMMddhhmmss)
	 */
	public static String getLastModified(String path) {
		File file = new File(path);
		Long lastModified = file.lastModified();
		return new SimpleDateFormat("yyyyMMddhhmmss").format(lastModified);
	}
}

 ※2018/08/29 SimpleDateFormatはスレッドセーフではないとご指摘をいただいたのでソースを修正しました。

で、読み込み側のjspファイルをこうしておく。

<link href="css/style.css?date='<%= Util.getLastModified(config.getServletContext().getRealPath("css/style.css")) %>'" rel="stylesheet">

こうしておけば、ファイルの日付が変わると自動的にパラメータが変わり、
確実に変更が反映されるようになる。

こんな感じ。

<link href="css/default.css?date=20170324234803" rel="stylesheet">

ブログはかなりほったらかしだなー。
しばらく忙しいのはまだまだ続きます。。。


この投稿へのコメント

  1. hidemo said on 2018年5月5日 at 08:23

    SimpleDateFormatはスレッドセーフでは無かった気がするので、クラスフィールドにしちゃうと変な結果になっちゃうかもです。(揚げ足取りですが)

    • doop said on 2018年8月29日 at 13:26

      あ、そだね。よくやるミスだ。
      コメントありがとー!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


この投稿へのトラックバック

トラックバックはありません。

トラックバック URL