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.
On
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/
On
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
On
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
On
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>
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).