Browser Back Button Treats Scripted Changes Differently In Safari And Chrome

For a time-consuming navigation (implemented in a Python/Flask backend), it's nice to have visual feedbak indicating that the next page is expected to take some time to load, even

Solution 1:

Actually the thing I was missing was the so-called "Back/forward cache" or bfcache. As a performance optimization, bfcache stores the full snapshot of a page, incuding the changes done by my litte JavaScript in Safari, but not in Chrome.

It turned out that we can react on bfcache events easily:

<scripttype="text/javascript">functionloading(){  // replace content by Loading ...document.getElementById("loading").style.display = 'block';
        document.getElementById("content").style.display = 'none';
    }
    functionmakeContentVisisble() {  // replace Loading ... by contentdocument.getElementById('loading').style.display = 'none';
        document.getElementById('content').style.display = 'block';
    }
</script><bodyonpageshow="makeContentVisisble()"><!-- called on browser back --><divid="loading"class="invisible">
        Loading ...
    </div><divid="content"><ahref="/time/consuming/service/call"onclick="loading();">Work miracles.</a>

That way browser back works smoothly (and fast, without page reload from backend) in both Chrome and Safari.

Find more detail about bfcache in this faily current blog from 2020: https://web.dev/bfcache/