How to trigger F5 key and reload page manually with full cache use

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?

Solution 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.

Solution 2

You are trying to solve this problem in the wrong place (i.e. on the client).

If your images truly never change, then add a far-future Expires http header on the server side to those images. This way the browser cache will not attempt to see if the image has been updated because the caching directive assures that it will not.

Comments

[Janning]

Please read my question! I use a cache forever statement but the browser still request the image on F5. I am going to make an update to my question...

[Francis Avila]

In my experience a refresh will only re-request the url and related resources that might be stale. Images like this only get re-requested on a hard refresh (shift-ctrl-R, or alt-cmd-R on Safari). Could you link to the page you are creating so we can see if perhaps there's a problem with your headers?

[Pierce McGeough]

Exactly what i need. What if the user hits the reload button on FF which works like a refresh rather than a reload?

[Hamid Sarfraz]

The code prevents page reload on F5 key press or Ctrl+R combination press. You can adapt it to change its behaviour. If you want to load the page normally, you can add top.location = top.location; after e.preventDefault();.

[Dsu Menaria]

thnx Avhinav singh maurya :)