87. (TWOK/LOGIC) [Web] 자바스크립트 onload 페이지 화면 진입 확인 (getEntriesByType navigation) 및 모바일 뒤로 가기 수행 로직 처리

---

[로직 정리]

​

정리 로직 : Mobile

​

상태 : [Mobile] 자바스크립트 onload 페이지 화면 진입 확인 (getEntriesByType navigation) 및 모바일 뒤로 가기 수행 로직 처리

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

- 웹 특정 URL 을 로드 하기 위한 모바일 네이티브 웹뷰 클래스 생성 필요

- 모바일 네이티브 (ex : Android) 에서 뒤로가기 버튼 클릭 시 웹 페이지 goBack 뒤로가기 처리 코드 작성 필요

- window.performance.getEntriesByType('navigation')?.[0]?.type 종류 : 

  >> navigate : a 태그 및 location.href 로 페이지 접속한 경우

  >> reload : 새로고침으로 페이지 접속한 경우

  >> back_forward : 뒤로가기로 페이지 재접속한 경우

  >> prerender : 사전 렌더링 때 확인 시 표시되는 값

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 모바일 네이티브 (웹뷰) 에서 웹 특정 URL 주소 호출 수행 실시


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

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


3. 웹 정상 진입 상태) 웹 페이지에서 해당 type 값이 a 태그 및 href 로 전환 된 경우는 정상 페이지 표시 수행 실시 (type 값이 navigate)


4. 웹 뒤로가기 진입 상태) 모바일 안드로이드에서 onKeyDown 키 이벤트 발생 시 웹뷰 페이지 webview.goBack(); 뒤로 가기 수행 및 
   웹 페이지에서 해당 type 값이 back_forward 로 표시 되는 것 확인


5. 웹 뒤로가기 진입 상태) 웹 페이지에서는 뒤로가기 이벤트로 화면이 표시 된 경우 다시 설정 및 로그인을 수행 하는 특정 페이지로 리다이렉션 처리 수행

// --------------------------------------------------------------------------------------






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

[Web Doc 사이트]

https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByType


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

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


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

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

// --------------------------------------------------------------------------------------

---