[JavaScript] 뒤로가기 문제 해결은 이것! OnpageShow

 

* onpageshow : 웹 페이지가 로드되거나, 새로고침이 될 때 발생하는 이벤트.

주로 모바일에 많이 사용하는데요.
onpageshow 이벤트는 페이지가 완전히 로드되기 전에 발생되고, 페이지의 상태에 따라 여러 가지 상태 값을 가질 수 있어요.


그렇다면! 어디서 이벤트를 사용할까요??

바로 "뒤로가기" 입니다.
(주로 뒤로가기 발생 시 문제가 되는경우가 있거든요)

거기다.. ios 사파리 경우는 화나게.. BFCache 가 존재하는데요.
BFCache : Back/ForWard Cache 의 약자로 브라우저의 성능을 향상시키는 기술 중 하나.
(뒤로가기 및 앞으로가기 눌렀을 때 페이지의 상태를 캐시하여, 페이지를 다시 로딩하지 않고 이전 상태로 복원해주는 기술인데요.)

이게 문제는 API 호출로 불러오는 페이지일 경우 뒤로 가기 눌러서 BFCache로 인해 API가 호출되지 않는 증상이 발생할 수 도 있어요.

저번에 저도 애먹은 적이 있어서;;;

그걸 보안하기 위해서 onpageshow를 사용합니다.

사용방법

BFCache에서 페이지가 복원될 때 호출 됩니다.

<script>
window.addEventListener('pageshow',(event)=>{
 if(event.persised || (window.performance && window.performance.navigation.type == 2)){
  // BFCache로 페이지 복원 되었을 때 들어오는 곳.
 }
 else{
  // 정상적으로 로드 되는 곳.
 }
});
</script>

위에 if 문안에 3가지 조건이 있는데요.
1. event.persised : 속성으로 브라우저의 앞/뒤로가기 버튼을 통해 이동한 경우 이벤트 리스너가 계속해서 실행되도록 하는 속성.

2. window.performance : 웹 페이지의 성능과 타이밍 정보에 접근할 수 있는 JavaScript API.

3. navigation : 브라우저의 탐색관련 정보를 제공하는 객체.
(type : 0(reload), 1(back), 2(forward)) 의미 한다.
- 하지만 일부 브라우저에서는 deprecated(사용이 권장되지 않음)될 수 있으므로, 사용전에 확인한다.


위에 3가지 조건은 뒤로가기 / 앞으로 가기로 눌러서 전/후 페이지로 이동 시 그 이동한 페이지에서 발생하는 이벤트로 BFcashe가 복원되었다면 if 조건에 처음 오는 페이지라면 else 문에 들어가게 됩니다.
(아이폰11 사파리 테스트 해봤는데 적용되더라구요 ㅎㅎ)