아이폰 Safari 뒤로가기시 alert 동작 안하는 이슈

안녕하세요.

오늘은 테스트 중 발견된 이슈에 대해 기록을 남겨볼까 합니다.

 

현재 프론트 개발 환경은 Nuxt3 + Vue3 입니다.

router의 경우 vue-router를 사용하고 있습니다.

우선 오늘 발견된 이슈는 제목에 적어놓은 것과 같이
아이폰 safari에서 페이지 A 진입 -> 뒤로 가기 하고 나면 alert과 confirm 등 system에서 띄우는 창들이 안 뜨고 먹통이 되고, 새로고침을 하면 정상 동작하는 이슈입니다. (맥에서는 정상 동작합니다.. 항상 모바일이 문제 ㅠㅠ)

우선 특정 페이지만 그런 건지 확인해 봤는데,
전체 페이지에서 동일한 이슈가 발생하는 것을 확인했습니다.

 

그래서 여러 가지 서칭해 본 결과!

safari에서 활용되는 bfcache와 관련이 있다는 것을 알 수 있었습니다.

bfcache란?
간략하게 설명하면, 사이트에서 뒤로 가기 하는 경우 기존에 cache에 저장되어 있는 페이지를 새로 로드하지 않고 그대로 보여주는 것이라고 하는데요!

이 경우 system alert 또는 confirm 등의 기능이 동작하지 않는다는 것을 발견했습니다.

 

근데 해당 이슈가 location.href로 이동한 경우에는 발생하지 않고, vue-router를 사용해서 이동한 경우에만 발생했는데요.

 

아마도 vue, react 같은 CSR 에서만 발생하는 이슈인 것 같습니다.

(해당 이슈로 검색한 결과가 vue, react 등의 CSR 환경에서 나온 이슈만 검색이 되었습니다.)

 

그래서 해결 방법을 여러 가지 찾아본 결과....!
현재로서는 완벽하게 해결하기 어려운 것으로 보였습니다.

 

우선 아래 코드와 같이 window.pageshow를 활용해 bfcache로 페이지가 로드된 경우 (뒤로 가기로 페이지가 로드된 경우) 페이지를 새로고침 하는 코드를 작성해 보았습니다.

window.onpageshow = function(event) {
	if ( event.persisted || window.performance.navigation.type === 2) {
		window.location.reload();
    }
}

 

이 경우, pageshow라는 메서드가 동작해야 하는데, SPA 방식인 vue에서는 페이지 이동 시 해당 메서드가 동작하지 않는 것을 확인했습니다.

그래서 결국 아래 이미지와 같이 system alert 대신 custom alert component를 만들어서 띄워주는 방식으로 해결했습니다.

 

01

모든 페이지에서 활용되는 공통 custom alert

 

 

크로스 브라우징 이슈들을 보면 사파리가 문제인 경우가 많을 것 같은데, 해결하는 게 항상 어렵긴 하네요 ^^;

 

사실 이 방법이 근본적으로 해결하는 방법은 아닌 것 같습니다. 그럼에도 당장 찾아본 결과는 vue에서 bfcache를 체크하는 방법은 없기도 하고, bfcache를 체크한다고 해도 로드 될 때마다 새로고침을 한다는 게 성능상 좋다고 볼 수는 없을 것 같아서 custom alert을 사용하는 편이 좋다고 판단했습니다.

저와 같은 고민을 하고 계신 분이 있으시다면 system alert을 버리고 custom alert으로 교체해 보세요!!!
이게 속편할수도..ㅎㅎ

 

* 혹시 잘못된 내용이나 더 좋은 방법이 있는 경우 댓글 언제나 환영입니다! 감사합니다 :)