아이폰 웹뷰 Safari 같은 경우는 BFCach 이슈때문에 정상적으로 작동하지 않는 이슈가 있다.
BFCache
는 JavaScript 실행을 중단하고 페이지의 DOM 상태를 캐시하므로 일부 JavaScript 이벤트와 상태를 예상치 못한 방식으로 작동하게 할 수 있다. 특히 JavaScript 이벤트 핸들러나 페이지 초기화 로직이 BFCache에 의해 영향을 받을 수 있다.
그래서 조치를 취해야하는데 아래 링크에서 해결법을 알 수 있다.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
뒤로가기 캐치를 해야할 때 보통 아래와 같은 로직을 쓴다.
useEffect(() => {
if (window._AppInfo?._os === 'android') {
setIsShow(true);
} else {
window.onpageshow = (e) => {
if (!isShow)
const navigation = window.performance.getEntriesByType('navigation');
if (
e.persisted ||
(navigation.length && (navigation[0] as PerformanceNavigationTiming).type === 'back_forward')
) {
setIsShow(true);
}
};
}
}, [setIsShow, isShow]);
근데 문제는 window.performance.getEntriesByType('navigation');
이 로직에서 safari14까지 객체가 빈배열로 return이 되기 때문에 정상적으로 작동하지 않는다.
그래서 14를 포함하여 모두 가능하게 하려면 window.performance.navigation
를 이용하여 추가로 로직을 넣어주면 된다.
useEffect(() => {
if (window._AppInfo?._os === 'android') {
setIsShow(true);
} else {
window.onpageshow = (e) => {
if (!isShow)
const navigation = window.performance.getEntriesByType('navigation');
if (
e.persisted ||
(navigation.length && (navigation[0] as PerformanceNavigationTiming).type === 'back_forward')
) {
window.performance.navigation && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD
setIsShow(true);
}
};
}
}, [setIsShow, isShow]);
window.performance.navigation && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD
의 로직을 추가로 넣어주면 safari14 이하 버전에서의 log에서 정상적으로 찍히는 것을 볼 수 있다.
좋은 정보를 주신 팀원분께 감사를🙏🏻