Question

We have a web page which is often reloaded by clicking F5 or Ctrl-R just for sake of looking if some new data arrived.

All images in this page have a cache forever header, so should never be reloaded by the browser.

But when a user presses F5 most browsers check every cache entry with a request and a if-modfied-since header. Our HTML page is never cached anyway but the images should be cached for a long time and there is no need to ask if the image was modified. It is a useless request and we want to get rid of it.

We have a reload icon on our page but users will still use the keyboard to reload (I would rather too).

So I tried to trigger F5 and Ctrl-R keys and do the reload manually like this (btw we are using jquery):

<img src="someimg.png" />
<a id="reload" href="mypage.html">Reload</a>    
<script type="text/javascript">
function loading() {
    window.location.href = $('#reload').attr("href"); 
    return false;
}

function isF5(e) {
    return e.which == 116;
}
function isCtrlR(e) {
    return e.ctrlKey &amp;&amp; e.which == 82;
}

function triggerReloadKeys(e) {
    if (isF5(e) || isCtrlR(e)) {
        $('#reload').click();
    }
}
$(document).bind("keydown", triggerReloadKeys);
$('#reload').click(loading);

someimg.png is always delivered with a long lasting cache directive.

My first answer would be to tell me not taking over the users browser and let him refresh if he wants to. You are right, but we something up to 5000 pages/sec in peak time. And even more images because everybody is reloading the page all the time. We just want to scale down the amount of request, regardless of how fast they are. (and I know that I can’t trigger the browser refresh button in the menu bar, but I don’t care about it right now).

We were pretty successful with reducing the amount of requests in our App as we just don’t have any reload button or F5 but everybody is forced to use our own HTML reload link.

What is possible is to disable the F5 key all together like this:

function triggerReloadKeys(e) {
    if (isF5(e) || isCtrlR(e)) {
        return false;
    }
}

I don’t know if it’s even possible to trigger F5 and force a reload while still using the cache and mimic the behaviour of clicking another link on the page.

Any ideas?

Answer 1

I assume you did not get your answer yet.

This is what I am using on my website:

var ctrlDown = false;
var ctrlKey = 17, f5Key = 116, rKey = 82;

$(document).keydown(function( e ) {
    if( e.keyCode == f5Key )
    {
        //F5 pressed. Copy your code here or try
        //window.location   = window.location;
        //It will avoid if-modified-since requests.
        e.preventDefault( );
    }

    if( e.keyCode == ctrlKey )
        ctrlDown = true;
    if( ctrlDown && ( e.keyCode == rKey ) )
    {
        //Ctrl + R pressed. Do whatever you want
        //or copy the same code here that you did above
        e.preventDefault( );
    }

}).keyup(function(e) {
    if (e.keyCode == ctrlKey)
        ctrlDown = false;
});

Hope it works for you.