pushState를 사용하면 가능하다. 다만 사용자의 인터렉션이 있어야 한다. (Chrome 기준)
페이지에 클릭 등의 액션 없이 곧장 다른페이지로 이동한 경우에는 동작하지 않는다.
브라우저에 히스토리 추가하기
//A - C 순으로 이력이 쌓인다.
history.pushState({page: 1}, "title 1", "?page=1"); //A
history.pushState({page: 2}, "title 2", "?page=2"); //B
history.replaceState({page: 3}, "title 3", "?page=3"); //C
history.back(); // A로 이동
history.go(1); //C로 이동
window.onpopstate = function(event) { //페이지 내에서 히스토리 이동 발생시의 이벤트
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
pushState를 사용하면 현 페이지에 대해 새 접근 기록을 추가해서 넣을 수 있다.
가끔 뉴스 사이트의 기사를 읽고나서 뒤로가기를 눌렀는데 뜬금없이 다른 광고 페이지가 새로 열리는 경험을 한 적이 있을 것이다. pushState, onpopstate를 이용하면 같은 기능을 구현 할 수 있을 것이다.
그리고 페이지를 매번 로드하지 않고, API 통신만으로 서비스를 구현 할 수 있다.
사용자의 인터렉션이 필요한 이유
사용자의 입력이 없음에도 브라우저의 이력을 조작할 수 있다면, 어떤 페이지에 접근을 한 것 만으로도 이력이 무한으로 쌓일 수 있기 때문에, 크롬에서는 '사용자의 입력'이 있어야 이벤트를 수행시킬수 있게 되어있는 듯 하다.
Chrome plans to save you from sites that mess with your back button
Has your back button ever mysteriously stopped working?
nakedsecurity.sophos.com
여담으로, 최근 크롬에서는 iframe 에서의 다이얼로그 사용을 금지하기도 했고, 서드파티 쿠키도 지원을 중지할 예정이 있는 등, 페이지간의 상호작용에 제약이 점점 늘어나는 추세로 보인다. API통신 외의 페이지간의 처리는 구현 가능여부를 보수적으로 바라보고, 서비스 구현시 이 점을 유의해야할 것이다.