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
즉, 페이지가 로드될때마다 persisted
속성이 true이면 location.reload()
리로드 해주어 해결한다.
참조 페이지
Last updated