웹에서 안드로이드 운영체제 뒤로가기 버튼 제어

드디어 해결했습니다.. ㅠㅠ

 

말 그대로 웹에서 안드로이드 운영체제 기반의 기기에만 있는 뒤로가기 버튼을 제어했습니다.

대충 설명 하자면,

웹에서 안드로이드 운영체제 뒤로가기 버튼을 막는건 안됩니다. 원래는..

 

그래서 구글링과 여러 사이트를 찾으면서 고안한 결과,

웹 뒤로가기 버튼을 감지하고 그걸 제어하는 거죠.

여러 방법들을 이용해 봤습니다.

1. 데코레이터를 이용(@HostListener('popstate'))

2. window.onpopstate

3. window.addListener

 

각 자 프로젝트마다 적용되는 게 다르겠지만, 저는 window.addListener를 이용했습니다.

1. 우선 함수를 선언합니다.

 

// angular.js 를 이용해서 작업했기 때문에, angular 식으로 쓸게요.
// react.js 같은 경우엔, useState와 비슷한 작업을 하는 라이프사이클 훅이라고 생각하면 됩니다.

ngOnInit(): void {
	this.onBackbutton(event);
}

2. 함수 내 로직을 작성

  // 전체적인 코드를 설명하자면, 뒤로가기 버튼을 눌렀을 때, confirm을 이용해서 한번 더 확인하고,
  // 뒤로 보내주냐, 아니면 뒤로가기를 막냐 입니다.
  
  a: boolean = false;
  onBackbutton(event) {
    const self = this; // window 내에선 this 가 먹히지 않아서 새로 선언 해야됩니다.
    history.pushState(null, null, location.href); // 우선 첫 뒤로가기를 막아야 함.
    window.addEventListener('popstate', function(event) { // popstate가 일어날 때마다 함수가 적용되게끔 이벤트리스너를 선언
      console.log('popstate!');
      if (!self.a) {
        var confirmationMessage = confirm('뒤로가기 실행 시, 모든정보가 초기화됩니다. 그래도 진행 하시겠습니까?'); //confirm문

        if (confirmationMessage) { // 확인 버튼을 눌렀다면?
          self.a = true;
          this.history.back(); // 뒤로 보내기 (history는 this를 써야합니다.) 이유는 (property) Window.history: History 이기 때문
        } else { // 취소 버튼을 눌렀다면?
          this.history.pushState(null, null, location.href); // 뒤로가기를 막아줍니다.
          self.a = false;
          return null;
        }
      }
    });
  }

어려운 건 아닌데, 며칠 고생해서 찾았어요..

요약 하면,

웹에서 안드로이드 운영체제의 뒤로가기를 막으려면 웹 뒤로 가기를 막아야한다.

 

그걸 window.addEventListener로 감지하고, history.pushState를 이용해서 막거나, history.back을 이용해서 뒤로 보내주어야 합니다.