[React/iOS] 사파리에서 fetch 후 새창 띄우는 방법

때는 랜선동네모임 프로덕트를 개발할 때 였다.

React 기반 프로덕트에서 어떤 버튼을 클릭했을 때, 서버에 data update를 요청하고 정상적으로 반영 되었을 경우 새 창을 띄우는 스펙이 있었다.

 

구현해야할 클라이언트-서버 동작 구조

 

해당 스펙의 구현을 위해 크게 고민할 부분이 없어보였고, 바로 구현을 시작했다.

그렇게 개발을 끝내고 테스팅을 진행하는데 Android에서는 정상적으로 동작했지만 iOS에서는 정상적으로 동작하지 않는 크로스 브라우징 이슈가 있었다.

디버깅을 진행해 보니 Axios fetching은 정상적으로 되었지만, 새창이 띄워지지 않는 이슈가 있었고 해결하기 위해 이것저것을 시도해봤지만 쉽게 해결되지 않았다.

 

그러다 구글링을 통해 이유를 알게 되었는데, iOS의 경우 사용자의 action에 의해서만 새창이 열리도록 되어있다는 것을 알게 되었다. 유저 사용성/보호 측면이라나 뭐라나... 이런 것만 봐도 애플이 얼마나 유저에 대해 고민하고 생각하는지 알 수 있다.. 개발자도 유저인뎅ㅠ

 

아무튼 해당 이슈는 많은 개발자들이 겪는 이슈였기 때문에, 다른 개발자들이 해결한 몇가지 방법을 따라하며 해결하려했다.

시도한 몇가지의 방법과 내가 해결한 방법을 공유하려 한다.

 

 

실패한 방법 -1 

const onClick = async () => {
	await increaseMeetingEnterUserCount(meetingId);
	window.open(url,"INFO","_blank");
}

 

 

실패한 방법 -2

const onClick = async () => {
	const a = document.createElement('a');
	a.href = 'https://google.com';
	a.setAttribute('target', '_blank');
	await increaseMeetingEnterUserCount(meetingId);
	a.click();
}

https://stackoverflow.com/questions/45569893/javascript-window-open-issue-in-safari

 

 

실패한 방법 -3

const onClick = async () => {
	const redirectWindow = window.open('about:blank');
  	await increaseMeetingEnterUserCount(meetingId);
	if (redirectWindow) redirectWindow.location = url;
}

https://webkini.tistory.com/42

 

 

실패한 방법 -4

const onClick = async () => {
	const redirectWindow = window.open('', '_blank');
	await increaseMeetingEnterUserCount(meetingId);
	if (redirectWindow) redirectWindow.location.href = url;
}

https://stackoverflow.com/questions/20822711/jquery-window-open-in-ajax-success-being-blocked

 

 

실패한 방법-5

const onClick = async () => {
	const redirectWindow = window.open(url, '_blank');
	await increaseMeetingEnterUserCount(meetingId);
	redirectWindow && redirectWindow.location;
}

https://stackoverflow.com/questions/44180931/javascript-window-open-not-working-in-safari-and-chrome/44181104#44181104

 

 

 

 

 

👉 해결한 방법 👈

  const onClickHandler = async () => {
    const windowReference = window.open(url, '_blank');
    await increaseMeetingEnterUserCount(meetingId);
    windowReference;
  }

 

window.open 함수를 windowReference라는 변수에 담아 두었다가, server에 data update request를 전송하고, 이후에 windowReference 변수를 호출(?) 하면 정상적으로 동작된다. 일반적인 변수 선언 및 호출 방식이 아니지만, 사파리를 뚫기위해서는 이렇게 하는 방법 뿐 이었다.

 

같은 이슈를 겪는 개발자가 있다면 위 방법을 한번 시도해보시길 바란다.