안녕하세요, 저희가 개발하고 있는 서비스를 카카오 인앱 브라우저에서 동작 시 문제가 발생하여 문의드립니다.
문제가 되는 부분은 다음과 같습니다.
- 중도 이탈 방지를 위해 beforeunload를 적용한 페이지에 안드로이드폰 사용자가 접근
(ios는 해당 문제 발생하지 않음) - 사용자가 해당 페이지에서 좌측 상단 X표시로 인앱 브라우저 종료
(이 때, beforeunload에 의한 중도 이탈 안내 팝업이 발생하지 않음) - 동일 url이나 다른 url로 인앱 브라우저 접근 시, 인앱 브라우저가 멈춤 (상호작용 불가능)
해당 문제는 카카오톡을 완전히 종료하기 전 까지 계속 발생합니다. (백그라운드에서 종료하기 전 까지 인앱 브라우저가 동작하지 않음)
카카오톡 인앱 브라우저에서는 beforeunload를 사용할 수 없는지, 중도 이탈을 방지하기 위한 다른 방법이 있는지 문의드립니다.
저희와 비슷한 문제가 있는 블로그 글( onbeforeunload 사용팁, 카카오톡 인앱 브라우저에서 문제 임시해결 방법)과, 문제가 발생하는 코드 일부를 첨부드립니다.
저희 서비스의 개발 환경은 Vue 2, node v16.14.2 입니다.
감사합니다.
preventClose(evt: any) {
if (!this.$store.getters.getPreventClose) return;
evt.preventDefault();
evt.returnValue = "";
}
beforeUnloadListener(addEventListener: boolean) {
if (addEventListener) {
window.addEventListener("beforeunload", this.preventClose);
return;
}
window.removeEventListener("beforeunload", this.preventClose);
}
mounted() {
this.beforeUnloadListener(true);
}
beforeDestroy() {
this.beforeUnloadListener(false);
}