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. This way, it can immediately display the previous page in its latest state when user presses back button.

This is useful for navigation and browsing web but for special cases this becomes annoying as you may need to get a fresh copy of the page each time user navigates to that page. (in my case I have to pages: login and main page).

I am totally aware that nothing prevents user from opening multiple tabs of the same application. I not concerned about that.

The cross browser solution for preventing page from being cached does not help as Safari is keeping the page open but invisible and suspended.

The window.onpageshow and handling event.persisted does not help as it seems that the browser does not execute onpageshow event for some reasons the second time (when you press back button).

Note for those who do not know what onpageshow event is about: Apple discourages using load and unload events because with the concept of page cache those events does not make a clear sense. So, onpageshow is supposed to do what we expect from load event.

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() 
    }
};