Browser Back & history API (브라우저 뒤로가기에 대한 대응)

개요

유저가 결제를 하는 프로세스에 들어와 있는 순간 브라우저 백 & 새로고침을 할 때 프론트에서는 어떻게 대응해야 할까?

 

대응책

1. 브라우저 뒤로가기 이벤트및 새로고침 이벤트를 조작해서 우리 원하는 처리를 해준다.

 

=> 이건 아쉽게도 크롬 브라우저 사양상 거의 불가능했다.

크롬에서 브라우저 이동 이벤트(popState, hashChange)에 대한 트리거 발생이 유저쪽에서의 interaction (click같은)

가 없으면 trigger되지 않는다.(javascript로 클릭이벤트 같은걸 발생시켜도 안됨)

// 둘다 유저쪽에서의 움직임이 없으면 trigger 안됨
window.onPopState(() => {}) 
window.onHashUpdate(() => {})

 

 

2. history를 조작한다.

 

=> pushState, updateState를 이용해 history를 조작해서 유저가 이동할 url 자체를 변경시켜

결제에 들어온 시점에서는 이동해도 에러페이지 url, 이나 에러처리 url을 history에 넣어준다.

(Safari의 bfcache정책도 감안해서 리로드시 javascript를 다시 리로드하도록 하는것도 잊지않기를.. )

 

history.replaceState({data}, 'Title', 'url') // 현재 히스토리를 바꾼다.
history.pushState({data}, 'Title', 'url') // 히스토리가 추가됨으로써 현재history -> 과거 push한 history -> 현재history

 

 

history & hash? 를 다루다보니 문득 Vue의 history mode에 대해서 떠올라서 밑의 링크가 아주아주아주 잘 설명해주셨다.

https://reimaginer.tistory.com/entry/spa-and-spa-routing

SPA와 SPA 라우팅 원리