Scroll restoration in SPA

복원을 한다.

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

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

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

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

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

복원을 하지 않는다.

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

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',
}

JaeYeopHan / tip-archive

Scroll restoration in SPA #39

복원을 한다.

복원을 하지 않는다.

Reference