`BFCache` - Safari

[yejineee]

Safari - BFCache

• BFCache란 ?
  • 사파리에서는 동일 세션에서 이전 페이지를 빠르게 보다 로딩하기 위하여 BFCache( Back-Foward-Cache ) 기능을 이용하여 이전에 저장한(캐싱) 데이터를 바로 로드한다.
• PageTransitionEvent : 페이지가 load나 unload되었을 때 발생하는 pageshow와 pagehide 이벤트 핸들러 안에서 사용가능한 이벤트 객체이다.
• PageTransitionEvent.persisted : 웹페이지가 캐쉬로부터 로드되었는지를 나타내는 flag이다.
• 사파리의 경우, 뒤로가기시 캐싱 데이터로부터 데이터를 가져오기 때문에, 뒤로가기시 persisted는 true가 된다.

    window.addEventListener('pageshow', e => {
      const isPersisted = e.persisted ? 'persisted' : 'not persisted';
      console.log('Event:', isPersisted);  
    });

참고

• 아이폰 브라우저 뒤로가기시 스크립트 리로드 오류 처리( onpageshow / BFCache)
• pageshow event - MDN
• Detect if the user arrived to the current page via the browser back button - stackoverflow