104. (TWOK/WORK) [업무 협의] [Mobile] 모바일 ( Android , Ios ) 웹뷰 에서 뒤로 가기 키 이벤트 발생 시 웹 페이지 리디렉션 처리

---

[제 목]

​

[업무 협의] [Mobile] 모바일 ( Android , Ios ) 웹뷰 에서 뒤로 가기 키 이벤트 발생 시 웹 페이지 리디렉션 처리

 

---

[내 용]

 

------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. 모바일 ( Android , Ios ) 웹뷰 네이티브 뒤로가기 키 이벤트 발생 시 시나리오 상 메인으로 진입해야하는데, 이전 설정 화면이 다시 표시 되는 이슈 발생

------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 설정 화면 웹 페이지에서 데이터 설정 후 저장 수행 실시


2. 저장이 완료 되고 저장 완료 페이지 표시 수행


3. 해당 페이지에서 네이티브 뒤로가기 버튼 클릭 시 다시 설정 값 입력 화면 표시 확인

  >> 시나리오 및 기대 결과 : 설정 완료 페이지에서 뒤로가기 수행 시 메인 화면으로 이동 필요

  >> 제안 사항 : 

    - 네이티브 개발 방향 : 특정 키 이벤트 발생 시 웹뷰 URL 값 체크 후 메인 페이지로 웹 페이지 로드 수행 실시 (특정 URL 값 체크를 하기 위한 하드코딩 코드가 들어가야함)

    - 웹 페이지 개발 방향 : 네이티브 뒤로 가기 키 이벤트 발생 시 웹 페이지 window.load 부분에서 웹 페이지 접속 타입 확인 , 뒤로가기로 접속한 경우 메인 페이지로 로드 수행 실시

------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 현재 네이티브에서는 웹 페이지 로드 수행 후 일절 웹 로직에 관여하는 부분 없는 상태로, 
    네이티브에서 수정하는 건 로직 관여로 추후 유지보수에 이슈가 발생할 수 있어 웹에서 수정하도록 협의

  >> 또한, 하드 코딩 방식으로 네이티브에서 처리할 경우 수정 사항이 발생할 때 마다 사용자 들이 다시 전체 앱을 재설치해야하는 이슈로 비효율적으로 판단


2. 웹 페이지에서는  window.onload = function() { } 웹 로딩 완료 이벤트 감지 부분에서 웹 페이지 로드 상태 값 확인 코드 추가

  >> 웹 소스 코드 : window.performance.getEntriesByType('navigation')?.[0]?.type


3. 웹 뒤로가기 진입 상태) 웹 페이지에서는 뒤로가기 이벤트로 화면이 표시 된 경우 정상 설정 완료 상태 확인 및 메인 페이지로 location.href 로드 수행 실시

  >> 정상설정 완료 상태 값은 간단히 쿠키 등을 활용해 정보 저장 수행

------------------------------------------------------------------------------
[참고 사이트]
------------------------------------------------------------------------------

[웹 페이지 네이티브 뒤로가기 이벤트 발생 로직 처리]

https://blog.naver.com/kkh0977/223621564921


[자바스크립트 페이지 접속 타입 체크 참고 사이트]

https://blog.naver.com/kkh0977/223621556976


[안드로이드 웹뷰 유틸 클래스]

https://blog.naver.com/kkh0977/222680670897?trackingCode=blog_bloghome_searchlist


[안드로이드 모바일 뒤로가기 이벤트 처리 및 웹뷰 goBack 페이지 뒤로가기 처리]

https://blog.naver.com/kkh0977/222579024393?trackingCode=blog_bloghome_searchlist

------------------------------------------------------------------------------

---