Scroll restoration in SPA

[jbee37142]

복원을 한다.

• 사용자가 보고 있던 화면을 유지해보자.
• 애플리케이션 내에서 스크롤 유지
• 외부 링크에서 복귀 시 스크롤 유지

앱 내 이동 시 스크롤 복원은 사용하고 있는 router 라이브러리의 scrollBehavior에 의존한다.

• 앱 내 뒤로가기 시, scrollBehavior 값으로 복원.
• 앱 내 router link 클릭 시, [0,0]으로 이동

외부 링크에서 복귀할 경우에는 session storage에 저장된 scroll position 값을 사용한다.

• lazy loading되는 이미지 엘리먼트에서 제공하는 loaded 이벤트를 사용한다.
• 외부 링크로 벗어날 수 있는 created lifecycle hook에 해당 retore 로직을 추가한다.

[jbee37142]

복원을 하지 않는다.

뒤로가기를 통한 접근인가 새로운 접근인가

session storage를 이용해서 복원을 하면 위와 같은 문제가 발생한다. 우리는 새로운 접근과 리프레쉬와 뒤로 가기 또는 앞으로 가기를 판단해야 한다. 이 부분을 어떻게 판단할 수 있을까.

이에 대한 답은 performance.navigation 객체에 있다. 우리는 이 객체를 통하여 다음과 같은 정보를 얻을 수 있다.

const navigation = performance && performance.navigation

export const TYPE_NAVIGATE = (navigation && navigation.TYPE_NAVIGATE) || 0
export const TYPE_RELOAD = (navigation && navigation.TYPE_RELOAD) || 1
export const TYPE_BACK_FORWARD = (navigation && navigation.TYPE_BACK_FORWARD) || 2

export function getNavigationType () {
  return performance && performance.navigation && performance.navigation.type
}

현재 navigation type을 받아서 분기를 한다. 즉 backward나 forward 일 때만 복원을 해주면 된다.

이렇게만 되면 행복할줄 알았지만. iOS에서는 performance.navigation.type이 무조건 0이다. bf cache 라는 것도 존재.

이것들을 전부 고려하여 복원해야 한다.

const [nav] = performance.getEntriesByType(‘navigation’)
console.log(nav.type)

enum NavigationType {
  'navigate',
  'reload',
  'back_forward',
  'prerender',
}

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
• https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
• https://w3c.github.io/navigation-timing/#sec-PerformanceNavigationTiming