뒤로가기 체크 후 새로고침하기

개발을 할 때 간혹 뒤로가기만으로 데이터를 처리하기가 난감할 때가 있다.

ex) 수정페이지에 들어가서 데이터 수정을 한 후 뒤로가기 시, 뿌려지는 데이터가 변경 전 데이터일 때

 

이럴 경우에 어떤식으로 처리해야 하는지 코드를 보며 살펴보겠다.

 

• pageshow

$(function () {
    if (document.addEventListener) {
        window.addEventListener('pageshow', function (event) {
                /** 뒤로가기 호환 */
                console.log(performance.getEntriesByType("navigation")[0].type);
                if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
                    location.reload();
                } else {
                    $("body").removeClass("hide");
                }
            },
            false);
    }
});

 

 

여기서 performance 라는 API가 등장하는데,

https://developer.mozilla.org/en-US/docs/Web/API/Performance를 참고하면 알 수 있다.

 

간단히 설명하자면 웹 어플리케이션의 성능 측정, 모니터링을 위해 JavaScript 인터페이스를 제공하는 웹 API다.

이 API를 사용하면 로딩, 자원 사용, 네트워크 성능을 분석할 수 있다.

 

우리는 뒤로가기를 체크하여 분기처리를 해줘야 하므로,

Performance API의 getEntriesByType 메서드를 사용해야 한다.

 

getEntriesByType의 매개변수의 종류

navigation
resource
paint
mark
measure

 

우리는 페이지 이동에 따른 정보, 타입을 알아야 하기 때문에 navigation을 매개변수에 넣어준다.

그 후 네비게이션 타이밍의 첫번째 속성의 type을 알아야 하는데,

 

type의 종류에는 3가지가 있다.

navigate
일반적인 페이지 탐색(navigation)을 나타낸다. 
주소 표시줄에 URL을 입력하거나 링크를 클릭하여 새로운 페이지로 이동할 때 발생한다.
reload
페이지 새로고침을 나타낸다. 사용자가 페이지를 다시 로드할 때 발생한다.
back_forward
뒤로 가기 또는 앞으로 가기 동작을 나타낸다. 
사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 클릭하여 페이지 탐색을 수행할 때 발생한다.

 

따라서, back_forward를 감지하고 새로고침을 해주면 된다.

그 외의 타입은 필요 시 분기처리를 하면 될 것 같다.