Question

When scripts are loaded via Head JS I am unable to force the content to refresh using the Ctrl+F5 (or equivalent) keyboard shortcut.

The scripts cache correctly and the browser obeys the cache directives sent from the server (I’m using IIS 7.5). But unlike scripts tags included directly in the markup, I can’t override the cache and force a refresh of the scripts loaded via Head JS.

I’m assuming this is a consequence of the way the scripts are loaded dynamically. I can live with this behaviour because forcing the refresh is only convenient during development, and I know of other ways I can force the content to be retrieved from the server.

I just wondered if anyone could explain why this is the case…

Update

This was never a problem for us in Live, because the cache directives for our static content were set appropriately. It was only ever a problem in Development and QA, The options left available to me were…

• Configure all Dev and QA browsers to never cache content.
• Configure the static content cache directives differently for Dev and QA environments – essentially setting MaxAge to something so small the content would always be expired. Only setting the correct MaxAge value in Live.

I went with the second option.

Answer 1

Dynamic script loading is not a part of the page loading proper. When you force refresh, the browser reloads the page and all resources referenced in its HTML and in referenced CSS files, but the scripts you load with head.js are not referenced in the page content and the browser has no way to figure out that head.js is going to create references to additional resources. At the point where these references are created, the browser is no longer refreshing the page and thus normal cache rules apply.

You can force reload of your scripts by appending unique query strings to their URLs (e.g. jquery.js?random=437593486394), but this will disable caching for all loads of your page, not just when you force refresh.