Genie Updates Required Browser Cache Clearing

[jthomas19]

We recently uploaded a new corporate logo that is used in our custom Genie skin. Users do not see the new logo unless they clear their browser cache.

Is there a setting or code that could be added to ensure that the most recent version of our skin is loaded by our users? Can pui.refresh() be added on our main menu screen (Onpageclick) or possibly within our custom.js to alleviate this? Would weekly bounces of the Apache server resolve this? What would the recommended solution to this be to prevent having to instruct users to delete their browser cache in order to see Genie skin updates?

[Scott Klement]

This has nothing to do with Genie, it has to do with the fact that you're making a web page and using it from a web browser. All web pages work this way -- the browser caches the things it downloads to make the page run faster next time you access it.

I suppose you could somehow integrate pui.refresh() into your skin -- but this doesn't seem like a good solution to me. Basically, after the browser has downloaded everything and started it running, you'd be telling it to scrap everything and start over. This doesn't seem very efficient to me. You'd also have to find some way to make it only happen once, because if you simply put "pui.refresh()" in the onload of the screen, it'd create a loop. (Each call to pui.refresh() would trigger the onload event to run again, which in turn would call puil.refresh() again, which would trigger onload again, etc, etc.)

A better solution, in my opinion, is to put a "cache buster" into the line of code that loads the logo from your Genie skin. This would be a short piece of JavaScript code that changes the URL with each call so that the browser will think it's a different file, and therefore will re-download it.

For example, if your skin works like our Hybrid skin, you should have code like this in the hybridSkin.displayLogo function inside your custom.js:

Code: Select all

  var logo = "logo.png";

You could change this code to something like this instead:

Code: Select all

  var logo = "logo.png?r=" + Math.floor(Math.random() * 1000000000);

What this does is add a random number onto the end of the URL for the logo. Every time you load the page that random number will be different, so it will see it as a different image and will re-load it from the server.

Or if you are using something like Skyline where it uses an actual <img> html tag, you could tell it to reload the image ... for example, skyline has this:

Code: Select all

    <td width="797"><img src="/profoundui/userdata/genie skins/skyline/headerright.jpg" /></td>

You could add code to the top (after the other <script> tags) like this:

Code: Select all

<script type="text/javascript">
function refreshLogo() {
  var logo = "/profoundui/userdata/genie skins/skyline/headerright.jpg?r=" + Math.floor(Math.random() * 1000000000);
  var img = document.getElementById("logo");
  img.onload=null;
  img.src=logo;
}
</script>

And then change the original <img> tag to look like this:

Code: Select all

    <td width="797"><img id="logo" src="/profoundui/userdata/genie skins/skyline/headerright.jpg" onload="refreshLogo()" /></td>

That will force it to re-load the "headerright.jpg" each time the Genie skin is started...

Does that help?

[jthomas19]

This definitely helps and gives us several good options for alleviating this concern. Thanks for the info!

Reading your response also gave me the idea of simply renaming the image file if we ever change it (As opposed to using the same path and file name).