아이폰 웹뷰 Safari 같은 경우는 BFCach 이슈때문에 정상적으로 작동하지 않는 이슈가 있다.

👩🏻‍💻 BFCache?

BFCache는 JavaScript 실행을 중단하고 페이지의 DOM 상태를 캐시하므로 일부 JavaScript 이벤트와 상태를 예상치 못한 방식으로 작동하게 할 수 있다. 특히 JavaScript 이벤트 핸들러나 페이지 초기화 로직이 BFCache에 의해 영향을 받을 수 있다.
그래서 조치를 취해야하는데 아래 링크에서 해결법을 알 수 있다.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching

📌 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')
        ) {
          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에서 정상적으로 찍히는 것을 볼 수 있다.

좋은 정보를 주신 팀원분께 감사를🙏🏻