JS: ошибочное всплывающее событие при попытке вернуться назад после начальной загрузки страницы

Question

Я пытаюсь реализовать историю JS, используя pushState / popState. Навигация назад и вперед работает просто отлично, но у меня проблемы с навигацией до начальной загрузки страницы с помощью кнопки "Назад" браузера. Требуется 1 дополнительное нажатие на кнопку назад браузера, чтобы покинуть страницу. Это почему?

function action(text) {
  history.pushState({"text":text}, text);
  doAction(text);
}

function doAction(text) {
  $('span').text(text);
}

var $button = $('button');
var $p = $('p');

$p.hide();

action("foo");
$button.on('click', function(){
  action("bar");
  $button.hide();
  $p.show();
})

window.addEventListener("popstate", function(e) {
  if (e.state !== null) {
      $button.show();
      $p.text("Next back should navigate away from this page");
  } else {
      $p.text("Still here? Why is that? Next back will really navigate away");
  }
});

https://jsfiddle.net/lilalinux/p8ewyjr9/20/

Изменить: протестировано с Chrome OS/X

Answer 1

Начальная загрузка страницы не должна использовать history.pushState потому что это добавит еще одну запись истории. Существует уже неявный первый элемент истории с состоянием null,

С помощью history.replaceState для начальной загрузки страницы, устанавливает состояние для этого элемента, но не добавляет другое.

var initialPageLoad = true;
function action(text) {
  if (initialPageLoad) {
    // replace the state of the first (implicit) item
    history.replaceState({"text":text}, text);
  } else {
    // add new history item
    history.pushState({"text":text}, text);
  }
  initialPageLoad = false;
  doAction(text);
}

function doAction(text) {
  $('span').text(text);
}

var $button = $('button');
var $p = $('p');

$p.hide();

action("foo");
$button.on('click', function(){
  action("bar");
  $button.hide();
  $p.show();
})

window.addEventListener("popstate", function(e) {
  if (e.state !== null) {
      $button.show();
      $p.text("Next back should navigate away from this page");
//  } else {
// won't happen anymore, as the first item has state now
//      $p.text("Still here? Why is that? Next back will really navigate away");
  }
});