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.

Have you tried this on various browsers? Also, try navigating back to the page - it should be definitely loaded from the cache. E.x you have `onpageshow` event registered on the body tag, then click on some link to open another page in the same tab, then navigate back to the original page. Does it fire? — Sebastian Kaczmarek, Mar 05 '19 at 08:34
There is an open bug in Chrome that prevents this from working https://bugs.chromium.org/p/chromium/issues/detail?id=344507&can=5&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified — lofihelsinki, Mar 06 '19 at 13:32

Subhendu Kundu · Answer 1 · 2019-03-05T11:30:23.113

5

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

edited Mar 05 '19 at 11:30

answered Mar 05 '19 at 09:20

Subhendu Kundu

2,880
3
14
41

Viswanath Lekshmanan · Answer 2 · 2019-03-05T09:44:29.817

3

From google books

This works in mozilla perfectly.

Try the below code

<meta http-equiv="Cache-control" content="public">
...
<body onpageshow="onShow(event)" onpagehide="onHide(event)">
    <div  >
            <a href='/new.html' >Next page</a>
    </div>
<script>
function onShow(event) {
       if (event.persisted) {
                alert('Persisted...');
       }
}
function onHide(event) {
        if(event.persisted) {
                alert("Persisted")
        }
}
</script>
</body>

Add any code in new.html. Blank page is also fine

Then use the browser back. You'll get the alert persisted

Note: Use a domain or ngrok . Cache doesn't work in local Reload wont trigger persisted. I tried only with page show/hide

I'am skipping the alternative answers to find cache or not

edited Mar 05 '19 at 09:44

answered Mar 05 '19 at 09:38

Viswanath Lekshmanan

9,155
1
37
60

Works in mozilla, not Chrome or IE11. – lofihelsinki Mar 11 '19 at 08:34
@lofihelsinki Op asked for mozilla in specific. Will check in chrome and get back to you. – Viswanath Lekshmanan Mar 11 '19 at 09:08

score 3 · Answer 3 · answered Mar 07 '19 at 15:07

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>

Abhishek Gautam · Answer 4 · 2019-03-11T05:57:12.170

-1

Well one thing I can suggest to disable the cache in the browser and check the size of the fetched code chunk. For the same you can disable the cache from browser itself..(I am just suggesting my views).

edited Mar 11 '19 at 05:57

answered Mar 05 '19 at 09:08

Abhishek Gautam

1,093
2
13
24

1

_"...I've even put firefox in offline mode and I see the response being fetched from cache..."_ – Adriano Repetti Mar 05 '19 at 09:15
1

Doesn't really provide any kind of answer to the question. – lofihelsinki Mar 11 '19 at 05:16

score -1 · Answer 5 · answered Mar 05 '19 at 09:19

I don't know if i understood your question correctly, you want to check if the page that is loaded is from disk/memory cache or a fresh one. Please comment below if i understood it wrong.

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

For this you can open the developer tools of your browser and check the network tab, if the page is loaded from cache it will show indication (from cache).

Chrome supports this out of the box but for fire fox i think you should install web-developer plugin : https://addons.mozilla.org/en-US/firefox/addon/web-developer/

When does PageTransitionEvent.persisted evaluate to true?

5 Answers5