211. (TWOK/ERROR) [Ios] WKWebview 웹뷰 뒤로가기 수행 시 Web BFCache 이슈 - history back

---

[환경 설정 및 설명]

​

프로그램 : Xcode

​

설 명 : [Ios] WKWebview 웹뷰 뒤로가기 수행 시 Web BFCache 이슈 - history back

 

---

[에러 원인]

​

1. Ios 웹뷰 사파리에서 BFCache 때문에 웹 뒤로가기 수행 시 (history back) 자바스크립트 및 api 호출이 정상 동작 되지 않는 이슈

  >> BFCache : 동일 세션내 브라우저에서 이전 페이지를 보다 빠르게 로딩하기 위해 이전에 저장한 캐싱된 페이지를 바로 로드하는 방법

 

---

[해결 방법]

​

1. 자바스크립트 pageshow 이벤트 리스너 추가 및 BFCache 로 부터 웹 페이지가 복원된 상태 체크

2. BFCache 로 부터 웹 페이지가 복원된 경우 location.reload() 웹 페이지 리로드 수행 및 페이지 갱신 처리

 

---

[로직 설명]

​

1. A 웹 페이지에서 B 웹페이지 이동 수행 (location.href)


2. 사용자는 B 웹페이지에서 일정 기간 사용 후 웹 페이지 뒤로가기 수행 (history.back)


3. A 웹 페이지에서는 window.onpageshow 이벤트에서 BFCache 로 부터 웹 페이지가 복원된 상태 확인


4. A 웹 페이지에서 BFCache 로 부터 웹 페이지가 복원된 경우  location.reload() 웹 페이지 리로드 수행

 

---

[자바스크립트 소스 코드]

 

    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>


        // =======================================================================
        // [자바스크립트 라이프 사이클 및 상태 변경 감지 부분]
        // =======================================================================

        // [dom 생성 및 이벤트 상시 대기 실시]
        document.addEventListener("DOMContentLoaded", ready);
        function ready(){
            console.log("");
            console.log("=========================================");
            console.log("[window ready] : [start]");
            console.log("=========================================");
            console.log(""); 
        }





        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[TestFile] : [window onload] : [start]");
            console.log("=========================================");
            console.log(""); 
        };





        // [페이지 show 이벤트]
        window.onpageshow = function (event) {
            if (event.persisted || (window.performance && window.performance.navigation.type == 2)) { 
                console.log("");
                console.log("=========================================");
                console.log("[TestFile] : [window onpageshow] : [BFCahe 로 부터 웹 페이지 복원 됨]");
                console.log("=========================================");
                console.log("");

                // [페이지 리로드 수행] >> [웹페이지 갱신]
                location.reload();
            } 
            else { 
                console.log("");
                console.log("=========================================");
                console.log("[TestFile] : [window onpageshow] : [새롭게 열린 웹 페이지]");
                console.log("=========================================");
                console.log("");
            }
        };


    </script>

---