How to prevent reloading of web page from cache while using mobile safari browser?

Question

Mobile Safari uses a special caching mechanism Page Cache (here) which basically keeps the current page alive but hibernated when we navigate to another page. T

Answer 1

Another potential solution is to look at the event.persisted flag to determine if it's cached or not:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

Answer 2

When user presses back button, you will receive the same document as you had before (the old page which was suspended). So if you handle onpagehide event and do some modification to the page just before navigating to the new page, your changes are kept there.

I tried adding a script block to the body just before navigating:

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
        });
    }

this does not work because the script immediately executes where my intention was to execute it when user returns back to the page.

BUT if you postpone your DOM modifications after leaving pagehide callback, (something like this):

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();

            // wait for this callback to finish executing and then...
            setTimeout(function() {
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
            });
        });
    }

TADA it works! as soon as user presses back button on the next page, Safari loads the suspended page and executes this new block of script which has not executed before.