[웹/모바일웹 개발] 뒤로가기 시 이전화면이 남아있는 현상 캐시 지우기

웹 또는 모바일에서

신청 여부 상태에 따라 버튼이 나타나고, 버튼 클릭 시 신청이 되는 기능이 있었는데,

이용자 한명당 중복신청이 불가하도록 처리되어있는데도 불구하고 버튼이 활성화 되어있다는 오류신고를 받았습니다.

 

확인해보니 뒤로가기 시 캐시가 남아있어 문제가 발생하였고,

테스트 브라우저는 똑같은 크롬 브라우저이지만 PC 에서는 버튼클릭시 나타나는 자체제작 모달창은 숨김처리 되어있었지만, 모바일에선 모달창까지 그대로 남아있었습니다.

 

이를 방지하기 위해 뒤로가기 이벤트로 해당페이지 접속 시엔 새로고침하도록 아래와 같이 소스를 추가하였습니다.

(javascript 소스)

window.onpageshow = function(event) {
    if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
        location.reload(true);
    }
}

[세부설명]

window.onpageshow : page 가 호출되면 무조건 호출

event.persisted : BFCache 로 로드되는 경우 True 결과 반환(사파리, 파이어폭스 브라우저처럼 동일세션에서 빠른 로딩을 위해 BFCache(Back-Forward-Cache) 로 이전 데이터가 바로 로드됨)

(window.performance && window.performance.navigation.type == 2) : 브라우저 뒤로가기 했을 경우 True

* 단, window.performance 는 현재 웹표준이 아니라고 함 https://docs.w3cub.com/dom/performance/navigation

window.performance : 성능정보 (https://docs.w3cub.com/dom/window/performance.html)

window.performance.navigation.type : url 로딩이 어떤 페이지 로드를 일으킨건지 등 확인하는 속성

0 : 링크클릭, 직접입력, form submit

1 : 리로드

2 : 히스토리 이동

3 : 그 외

location.reload(true) : 페이지 새로고침