"Buggy" bfcache Behavior

For anyone who doesn't know, bfcache is the Back/Forward cache in browsers. I recently fixed an unusual issue in a page that I host that was caused by this. For multiple years, this site ran without fine until suddenly it started misbehaving. Navigating back to a page after following a link would occasionally just reload the current page. Originally I thought this was something wrong with my service worker cache. However, after careful analysis, I discovered the true root of the issue, bfcache. When a page is restored from bfcache, it is NOT rebuilt using DOMParser. The page is loaded back to the same state at which you left it including any modifications to the DOM and even the console log history is maintained. In this project, I have animations that were running during a beforeunload event. This chain eventually lead to a tranistionend event that would trigger the actual page navigation. The issue I was having was that the transitionend event handler which I was adding just before leaving the page was remaining active on page restore, and thus, when the page load animations ended, that would trigger an immediate navigation away, back to the page that was just active. This transitionend handler was not properly cleaned up as the expectation was for the page to be unloaded immediately after it fired. Adding a call to removeEventListener before the actual navigation cleared the issue right up. Now this is a pretty specific and unusual issue, but if you are noticing unexpected behavior in your web apps after page navigation, bfcache restoring your page instead of it reloading may be your issue. To confirm if bfcache is the issue, it can be disabled by adding an unload event handler. window.addEventListener('unload' () => {}); On desktop browsers this makes the page ineligible for bfcache. Of course, disabling bfcache is not the right approach to fix this, I had to dig deeper. What I found is that, use of the unload and beforeunload events are no longer recommended and the best way to address this was by handling any state cleanup inside a pagehide event handler and set everything back up in a pageshow event handler. window.addEventListener('pagehide', event => { console.log('page saved to bfcache, perform state saving here'); }); window.addEventListener('pageshow', event => { if (event.persisted) { console.log('page was restored from bfcache, restore state here'); } else { console.log('normal page load, do fresh page setup'); } }); For the best user expereience, the above approach is reccomended. However, if you absolutely MUST start with a fresh page load for whatever reason. This can be accomplished by triggering a reload after a pageshow event. window.addEventListener('pageshow', event => { if (event.persisted) { location.reload(); } });

Mar 14, 2025 - 21:50

For anyone who doesn't know, bfcache is the Back/Forward cache in browsers. I recently fixed an unusual issue in a page that I host that was caused by this.

For multiple years, this site ran without fine until suddenly it started misbehaving. Navigating back to a page after following a link would occasionally just reload the current page. Originally I thought this was something wrong with my service worker cache. However, after careful analysis, I discovered the true root of the issue, bfcache.

When a page is restored from bfcache, it is NOT rebuilt using DOMParser. The page is loaded back to the same state at which you left it including any modifications to the DOM and even the console log history is maintained. In this project, I have animations that were running during a beforeunload event. This chain eventually lead to a tranistionend event that would trigger the actual page navigation.

The issue I was having was that the transitionend event handler which I was adding just before leaving the page was remaining active on page restore, and thus, when the page load animations ended, that would trigger an immediate navigation away, back to the page that was just active. This transitionend handler was not properly cleaned up as the expectation was for the page to be unloaded immediately after it fired.

Adding a call to removeEventListener before the actual navigation cleared the issue right up. Now this is a pretty specific and unusual issue, but if you are noticing unexpected behavior in your web apps after page navigation, bfcache restoring your page instead of it reloading may be your issue. To confirm if bfcache is the issue, it can be disabled by adding an unload event handler.

window.addEventListener('unload' () => {});

On desktop browsers this makes the page ineligible for bfcache. Of course, disabling bfcache is not the right approach to fix this, I had to dig deeper. What I found is that, use of the unload and beforeunload events are no longer recommended and the best way to address this was by handling any state cleanup inside a pagehide event handler and set everything back up in a pageshow event handler.

window.addEventListener('pagehide', event => {
    console.log('page saved to bfcache, perform state saving here');
});

window.addEventListener('pageshow', event => {
  if (event.persisted) {
    console.log('page was restored from bfcache, restore state here');
  } else {
    console.log('normal page load, do fresh page setup');
  }
});

For the best user expereience, the above approach is reccomended. However, if you absolutely MUST start with a fresh page load for whatever reason. This can be accomplished by triggering a reload after a pageshow event.

window.addEventListener('pageshow', event => {
  if (event.persisted) { location.reload(); }
});