Navigation Timing Level 2

window.performance.getEntriesByType('navigation')[0].type

• type

enum NavigationType {
    "navigate",
    "reload",
    "back_forward",
    "prerender"
};

• navigate
  Navigation where the history handling behavior is set to "default" or "replace" and the navigation was not initiated by a prerender hint [RESOURCE-HINTS].
• reload
  Navigation where the history handling behavior is set to "reload".
• back_forward
  Navigation where the history handling behavior is set to "entry update".
• prerender
  Navigation initiated by a prerender hint [RESOURCE-HINTS].
• https://www.w3.org/TR/navigation-timing-2/#sec-navigation-timing

⚠️ Deprecated - window.performance.navigation

• window.performance.navigation객체의 type 프로퍼티에 앞/뒤 버튼, 리로드 된 것인지에 대한 여부가 저장된다.
• 이 타입이 TYPE_BACK_FORWARD일 경우, 앞/뒤 버튼을 통해 페이지가 로드되었음을 알 수 있다.

window.performance && 
window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD

• window.performance.navigation.type

  

deprecated

performance.navigation는 Navigation Timing Level 2 specification에서 deprecated되었다.

This feature is no longer recommended.
Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
Avoid using it, and update existing code if possible;
see the compatibility table at the bottom of this page to guide your decision.
Be aware that this feature may cease to work at any time.

• https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Safari의 BFCache

• 사파리의 경우, 앞/뒤로가기 버튼 클릭으로 페이지가 이동되었을 경우, 캐쉬에 있는 데이터를 로드하게 된다.
• 뒤로가기시 pageshow 이벤트의 persisted는 true가 된다.

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

참고

• 네비게이션 타이밍 API - MDN
• Detect if the user arrived to the current page via the browser back button