Preventing iframe caching in Chrome

Question

I have an emulator I wrote for testing smart TV web apps. The emulator itself is a web app, with a simple interface that showing a TV and remote, and loads the web app being tested inside an iframe. Users launch the emulator from the command line, which starts up two simple HTTP servers (one for the emulator, one for the web app being tested), then starts up chrome using the --app command line switch pointing it at my emulator.

The problem is that every time Chrome launches, it loads a cached version of the web app. If you made changes to your web app since last launch, they aren't shown until you do a hard refresh of the page.

To get around this, I've tried the following:

• Launching Chrome with the addition of the --disable-cache switch
• Appending a random query param to the startup URL passed to chrome (ex: --app=http://localhost:6001/?random={some_hash})
• Appending a random query param to the web app URL specified in the iframe

None of these seem to do the trick, however. The emulator code doesn't appear to be getting cached as the src URL in the iframe does indeed get a new random value appended to it every time. However, the page loaded in the iframe is old, and always requires an refresh after initial launch.

Any other things I can try that I haven't covered above?

Further example of issue:

• User launches emulator for first time for web app 1
  • Web app 1 shown in emulator
• User closes emulator
• User launches emulator for web app 2
  • Web app 1 shown in emulator

In this case, the emulator would launch and still show web app 1. It continues to show web app 1 through refreshes until the user performs a hard refresh (cmd+shift+r), at which point web app 2 finally displays.

Solution

It sounds like this might be related to the bug here: https://code.google.com/p/chromium/issues/detail?id=324102

As a workaround, I found that setting the iframe src from javascript ALONG WITH appending a random query param to the URL seems to do the trick. Simply doing one or the other doesn't work.

Example:

// still loads stale page
document.getElementById('tv-screen').src = 'http://localhost:6001/'; 

// will load fresh page
document.getElementById('tv-screen').src = 'http://localhost:6001/?rand=' + Math.round(Math.random() * 10000000);

Comments

[Danny]

So just to update, I modified my server's response headers to include every possible directive for disabling caching (ETag, Last-Modified, Cache-Control, Expires, Pragma) and it didn't do the trick. Bug in Chrome's handling of iframes?

[ᴍᴀᴛᴛ ʙᴀᴋᴇʀ]

Math.round(Math.random() * 10000000) = Brilliant!

[Nicolae Olariu]

Or you could simply use the timestamp: 'http://localhost:6001/?rand='+ (+ new Date())

[Alex]

you can go ?rand=' + new Date()/1