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?