Webアプリで静的リソースのキャッシュバスティングをしたく・・・

Question

静的リソースのキャッシュバスティングをするため、jspに以下のように記述しましたが上手くいきません。

<script>
	function createTime() {
		return new Date().getTime();
	}
</script>

<link rel="stylesheet" href="css/test.css?date=createTime()" type="text/css">
<link rel="stylesheet" href="css/test.css?date=javascript:createTime()" type="text/css">
<link rel="stylesheet" href="css/test.css?date=<%=createTime()%>" type="text/css">

createTime()の戻り値を付与するにはどうしたらよいのでしょうか？

Comments

[yambejp]

むしろその表記だけでは実行さえされていませんよね？

Answer 1

画面を読み込むたびにソースを取りに行ってしまいますが、以下で実現できました。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="DATE" value="<%=new java.util.Date().getTime()%>" />

<link rel="stylesheet" href="css/test.css?date=${DATE}" type="text/css">

Answer 2

createTime() 部分は Java で実装しましょう。

JSPは、サーバー側のJavaで様々な値を埋め込んで応答するHTMLを動的生成するはずです。
処理命令部分（<%〜%>）は Java で埋め込む部分です。
（ちなみに、script 要素はページを表示したブラウザが実行するjavascriptです）

<link rel="stylesheet" href="css/test.css?date=<%=JAVAの実行結果%>" type="text/css">

追記）

createTime()の戻り値を付与するにはどうしたらよいのでしょうか？

JavaScriptで キャッシュバスティング できるケースは動的リソースに限られます。

1. Ajaxで要求して応答を受け取るとき
2. DOMを動的に配備する際にsrc属性などで指定したリソースを受け取るとき

---

静的リソース

クライアント・サーバー・システムの基本を再確認：

[サーバー]      [クライアント(ブラウザ)]
    |              (1)
    |<== req(html) =|
   (2)              |
    |= res(html) ==>| 
    |              (3)
    |<== req(css) ==|
    |<== req(js) ===|
    |<== req(img) ==|
   (4)              |
    |== res(css) ==>| 
    |=== res(js) ==>| 
    |== res(img) ==>| 
    |              (5)
    |               |

1. ブラウザはHTMLページを要求
2. サーバはブラウザからの要求を受けてJSPからHTML生成して応答。
3. ブラウザはHTMLに必要な他のリソースも要求
4. サーバは3.に応じる
5. 受け取った 4.のリソースはキャッシュされる。

バスティングしても、基本的にはブラウザのキャッシュに残ります。
（URLの クエリ文字が異なるのでリクエストし直す 仕組み）