pushStateメソッドの使い方について

以下のHTMLとJavaScriptを書きました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn">
    <span id="result">ー</span>回クリックされました

    <script>
    var count = 0;
    var result = document.getElementById('result');
    document.getElementById('btn').addEventListener('click',function(){
        result.textContent = ++count;
        history.pushState(count,null,'/js/chap07/count/' + count);
    });

    window.addEventListener('popstate',function(e){
        count = e.state;
        result.textContent = count;
    });
    </script>
</body>
</html>

テキストによれば、戻るボタンを押すと、カウンターの更新が前に戻るようです。
しかし、ローカルのHTMLファイルを実行してみて、ボタンをクリックすると、正常にカウンターは1つずつ増えていきますが、ブラウザ（chrome）の「戻る」ボタンはグレーアウトされていて押せません（「前のページ」というのが存在しないのでグレーアウトは当然だと思います）。
pushStateメソッドを使うと、ブラウザの「戻る」ボタンを押したときにページごと前のページに戻るのではなく、カウンターの数値だけを1つ前に戻すことができると思うので、そのことを確かめたいのですが、どうしたらいいでしょうか。