Simple progressive enhancement, no framework, etc:
/**
enhance clicks on .xhr elements:
*/
window.addEventListener('click', function(e){
var t = e.target;
if(t.closest('.xhr') || t.classList.contains('xhr')){
fetch(
t.href,
{}
).then(function(response){
// ..
}).then(function(json){
window.history.pushState(
[],
'',
t.href
);
// change markup on the page, etc..
});
}
}, false);
/**
listen to back
*/
window.addEventListener('popstate', function(e) {
// how to leverage BF-cache here?
// can it be done?
});
The comment under popstate
says it all: is there a way to let the browser automatically use its BF-cache on the popstate event?