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

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

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

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

さて、本題。
 

キャッシュを利用する

例によって割愛。

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

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

[code lang=”html”]
<link href="css/default.css?date=20131012" rel="stylesheet">
[/code]

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

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

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

[code lang=”java” line=”1″]
/** 最終更新日時取得用書式定義 */
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);
}
}
[/code]

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

で、読み込み側のjspファイルをこうしておく。
[code lang=”html”]
<link href="css/style.css?date='<%= Util.getLastModified(config.getServletContext().getRealPath("css/style.css")) %>’" rel="stylesheet">
[/code]

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

こんな感じ。
[code lang=”html”]
<link href="css/default.css?date=20170324234803" rel="stylesheet">
[/code]

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