React-native내의 영역을 웹으로 넘겨서 웹뷰로 띄워 보여주는 방식으로 변경되는 프로젝트를 진행중 작업과정을 다시 정리해보고자 한다.
문제1
뒤로가기 할때 웹뷰가 꺼지지 않고 이전 웹페이지 스택이 호출되는 이슈
그래서 사수님과 작업은 했었는데, 이제는 꽤나 사람들이 많이 이용하게 되는 부분에 적용이 되어야해서 뭐가 문제이고 정확하게 문제를 해결해야 했다.
과정
- 뒤로가기 할때 웹뷰가 꺼지지 않고 이전 웹페이지 스택이 호출되는 이슈(/aa/bb라는 페이지를 열었고, 뒤로가기를 누르면 웹뷰가 닫혀야하는데 /aa 페이지로 이동하게됨)
- 웹페이지 react.js 코드에서 뒤로가기가 navigation(-1)이 아닌 특정한 주소로 이동하고 있었다. 그래서 이전 페이지가 아닌 특정한 주소로 이동했던 것
-
웹뷰가 닫혀야하는 곳에서 닫히지 않는 이슈
- 웹에서 전달한 메시지를 앱에서 받기 위해서는 onMessage에 작업을 해야한다.
(참고 링크: 웹에서 전달한 메시지 앱에서 받기) -
e.nativeEvent.data를 감지하여 "WINDOW_CLOSED"와 같으면 navigation.goback()을 하도록,
function messageHandler(e: WebViewMessageEvent) {
const eventStatus = e.nativeEvent;
if (eventStatus.data === 'WINDOW_CLOSED') {
return navigation.goBack();
}
if (eventStatus.data === 'POPSTATE') {
setPaging(paging - 1);
} else if (eventStatus.data === 'navigationStateChange') {
setPaging(paging + 1);
}<WebView
ref={webviewRef}
javaScriptCanOpenWindowsAutomatically
style={flex}
onMessage={messageHandler}
...
/>문제2
안드로이드에서 웹뷰를 연 후 다음 페이지스택으로 넘어가면 물리적 백핸들러가 작동하지 않았다.(aa라는 웹페이지에서 뒤로가기를 하면 되지만 , aa/bb로 스택이 쌓이면 안됨)
과정
- 웹페이지에서 뒤로가기 누를시 특정 페이지로 지정 (navigation(-1)이 안되기에)
- 특정 페이지로 지정시 웹뷰를 닫아야하는데 그 전 웹페이지가 나오게 되면서 부자연스럽게 됨
- 코드를 초기화하여 다른 웹페이지를 연동해보았다. 잘되었다!! 그래서 차이점을 찾기 시작하였고
Android Developers 페이지에 보면
setUserAgentString
public abstract void setUserAgentString (String ua)
WebView의 사용자 에이전트 문자열을 설정합니다. 문자열이 비어 있거나 null비어 있으면 시스템 기본값이 사용됩니다.
사용자 에이전트가 이러한 방식으로 재정의되면 사용자 에이전트 클라이언트 힌트 헤더 값과 navigator.userAgentData이 WebView에 대한 값이 변경될 수 있습니다.
Android 버전 부터 Build.VERSION_CODES.KITKAT웹 페이지를 로드하는 동안 사용자 에이전트를 변경하면 WebView가 다시 로드를 시작하게 됩니다.
- 위 Android Developers 페이지 내용을 보면 로드 중에 userAgent가 설정되고 다시 로드하면 url이 재설정될 수 있음을 알게 되었다
userAgent에 설정해주었던 것이 문제임을 알았다
<WebView
ref={webviewRef}
incognito={true}
javaScriptCanOpenWindowsAutomatically
userAgent={googleAuthProxy}
style={flex}
originWhitelist={['*']}
onMessage={messageHandler}
onError={errorHandler}
source={{uri: params?.uri || ''}}
injectedJavaScript={params?.injectedJS}
onNavigationStateChange={params?.navigationStateChange}
javaScriptEnabled
/>- 해결방법: userAgent={googleAuthProxy}를 주석처리해보았다. 잘 되었음!
그런데 위와 같이 주석처리 하면 구글 로그인이 안될 수 있다. 구글에서 특정 루트를 막고 있기에, 아래 링크로 업데이트도 추천한다. 우리는 구글 로그인이 웹뷰에서 필요없어서 주석처리하면 해결!
참고: https://github.com/react-native-webview/react-native-webview/pull/3106
