When does PageTransitionEvent.persisted evaluate to true?

Question

I'm trying to detect if my current page is loaded from cache or is a fresh copy.

I have the onPageShow callback registered on my body tag. I can see it being triggered, but I cannot produce a circumstance where the event.persisted is actually true.

I've even put firefox in offline mode and I see the response being fetched from cache on the network tab but event.persisted is still false.

Answer 1

Umm I can confirm var isCached = performance.getEntriesByType("navigation")[0].transferSize === 0; this does work on Chrome. Worth trying out. Also as other suggested you might wanna look at this example How can I use JavaScript to detect if I am on a cached page

Answer 2

IE11 does have window.performance.getEntriesByType('navigation') but doesn't have transferSize. However, it seems to leave out connectEnd if the page comes from browser cache.

Extending on @subhendu-kundu s answer, this should also work on IE11

<script>

  window.addEventListener('pageshow', function(event) {

    if (window.performance) {
      var navEntries = window.performance.getEntriesByType('navigation');
      if (navEntries.length > 0 && typeof navEntries[0].transferSize !== 'undefined') {

        if (navEntries[0].transferSize === 0) {
          // From cache
        }

      } else if (navEntries.length > 0) {

        // IE11 seems to leave this completely if loaded from bfCache
        if (!navEntries[0].connectEnd) {
          // From cache
        }

      }
    }

  });

</script>