BFCache란?

모바일 웹을 개발하다가 특정 OS/브라우저의 특성에 따른 이슈가 많이 발생한다. 아이폰(IOS) Safari 브라우저에서 뒤로가기(history.back) or 동일 페이지로 이동했을때 페이지가 reload되지 않고, 스크립트가 정상적으로 실행되지 않는 증상이 발생하는 경우가 생겼다.

BFCache는 Back-Forward Cache로 safari, firefox 브라우저에서 동일 세션에서 이전 페이지를 보다 빠르게 로딩하기 위해 이전에 저장한 데이터를 바로 로드하고 있다.

이떄 Javascript 상태값까지 저장된 값으로 재사용하게 되는데, window.onload 혹은 $(document).ready() 단계에서 처리하는 로직이 있는 경우에는 BFCache를 통해 이전 데이터를 불러오지 것은 이슈가 될 수 있다.

이때 onpageshow() 이벤트를 이용해 해당 문제를 해결할 수 있다.

• onpageshow : 페이지가 로드될때마다 무조건 발생하는 이벤트

• persisted 속성 : 페이지가 캐시되었을 경우 true, 아닌 경우 false를 return

$(window).bind('pageshow', function(event){
  if(event.originalEvent && event.originalEvent.persisted){
    location.reload();
 }
});

즉, 페이지가 로드될때마다 persisted 속성이 true이면 location.reload() 리로드 해주어 해결한다.

참조 페이지

• https://ifuwanna.tistory.com/63