Force reload/refresh when pressing the back button

Question

I will try my best to explain this.

I have an application that show the 50+ projects in my view page. The user can click the individual project and go to the update page to update the project information. Everything works fine except that after user finish updating the individual project information and hit 'back' button on the browser to the previous view page. The old project information (before update) is still there. The user has to hit refresh to see the updated information. It not that bad, but I wish to provide better user experience. Any idea to fix this? Thanks a lot.

Answer 1

I use these four lines of PHP code:

// any valid date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// always modified right now
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: private, no-store, max-age=0, no-cache, must-revalidate, post-check=0, pre-check=0");
// HTTP/1.0
header("Pragma: no-cache");

The key is using the "no-store" clause of the Cache-Control header.

Answer 2

The "fb-cache" can be really annoying. Here is a simple javascript way around it:

window.onpageshow = function(evt) {
    // If persisted then it is in the page cache, force a reload of the page.
    if (evt.persisted) {
        document.body.style.display = "none";
        location.reload();
    }
};

Tested in Safari 6 and IE10.

Answer 3

I think you must work with JS to make this work, since there is no way for PHP to know what browser controlls the user has access to...

Maybe this will help: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Answer 4

Fortunately, we don't have to support browsers below IE10, so if you're willing or privileged enough to support only browsers that are HTML5 capable, the following should work:

/*
 * The following is intentional, to force Firefox to run 
 * this JS snippet after a history invoked back/forward navigation.
 */
window.onunload = function(){};    

function formatTime(t) {
    return t.getHours() + ':' + t.getMinutes() + ':' + t.getSeconds();
}

if (window.history.state != null && window.history.state.hasOwnProperty('historic')) {
    if (window.history.state.historic == true) {
        document.body.style.display = 'none';
        console.log('I was here before at ' + formatTime(window.history.state.last_visit));
        window.history.replaceState({historic: false}, '');
        window.location.reload();
    } else {
        console.log('I was forced to reload, but WELCOME BACK!');
        window.history.replaceState({
            historic  : true,
            last_visit: new Date()
        }, '');
    }
} else {
    console.log('This is my first visit to ' + window.location.pathname);
    window.history.replaceState({
        historic  : true,
        last_visit: new Date()
    }, '');
}

Well, here's the code without comments and flab:

window.onunload = function(){};

if (window.history.state != null && window.history.state.hasOwnProperty('historic')) {
    if (window.history.state.historic == true) {
        document.body.style.display = 'none';
        window.history.replaceState({historic: false}, '');
        window.location.reload();
    } else {
        window.history.replaceState({historic  : true}, '');
    }
} else {
    window.history.replaceState({historic  : true}, '');
}

Stick that just before your closing body tag, and you'll have a fairly clean solution.

This will work with any combination of back/forward being clicked, and the moment the user lands on a new page, no forced reloading will occur.

Read more about the History object on MDN:

MDN - The History Object

MDN - Manupulating the Browser History