react-native-webview ↔ web 데이터 송수신

웹으로 구현한 채팅방 페이지를 앱 내부에 띄워주는 상황.

import WebView from "react-native-webview";

<WebView
    source={{
      uri: WEB_URL
    }}
/>

RN에서 기본적으로 제공하는 WebView 컴포넌트를 통해 앱 내부에서도 WEB_URL에 해당하는 웹페이지를 띄울 수 있다.

 

여기서 문제.

서비스 대상자인 미용사와 보호자 모두 동일한 WEB_URL로 채팅방에 접속한다는 사실!

따라서 현 사용자가 미용사인지, 보호자인지 구분하는 flag가 필요했다.

→ 현 도매인 상황을 고려했을 때 앱에서 해당 URL에 접근했을 경우, 이를 미용사로 판단해야했다.

 

그렇다면... 어떻게 앱에서 WEB_URL에 해당하는 웹페이지에 특정 데이터를 전달할 수 있을까?

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md

GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView

가장 일반적으로는 webView의 postMessage/onMessage 메서드를 사용한다.

postMessage를 통해 해당 web으로 message(string)를 전달할 수 있으며,

onMessage를 통해 web에서 ReactNativeWebView로 postMessage한 message를 받을 수 있다.

 

웹에서는?

android는 document객체, ios는 window객체에 message라는 eventListener를 달아 앱의 postMessage를 수신할 수 있으며,

window.ReactNativeWebview의 postMessage를 통해 앱으로 message를 전달할 수 있다.

 

하지만 문제.

web에서 message라는 event가 발생할 경우 → 이용자는 미용사 라 작성했기 때문에,

해당 event가 발생하지 않았을 때는 → 이용자는 보호자 로 작성할 수밖에 없다.

 

그러나 이렇게 되면?

앱에서 해당 web에 접근해 postMessage를 실행한다 해도,

해당 시점에 웹에서 addEventListener가 동작했음을 확신할 수는 없다!

(추가적으로 브라우저 객체에 접근하기 위해 useEffect hoooks를 사용했기 때문에,

무조건 addEventListener전에 postMessage가 실행되고 말았다)

 

또한 addEventListener가 message 이벤트를 감지하기 전까지는 

이용자가 보호자인 경우의 UI가 보이다가, 다시 미용사인 UI로 깜빡이는 문제도 발생했다.

 

즉... HTML이 Load된 후, 곧바로 웹에 데이터를 수신할 방안이 필요했다!

기승전 공식 문서

injectedJavaScript를 통해 이를 구현할 수 있다!

→ document가 load 완료된 후, 하위 리소스 load가 완료되기 전에 실행될 JavaScript를 제공!

 

와! 따라서 굳이 postMessage로 데이터를 송수신하는 방법 대신,

injectedJavaScript를 이용해 sesstionStorage에 앱 접근 flag를 심는 방안으로 해당 기능을 구현할 수 있었다.

→ 웹에서도 sesstionStorage를 조회해 해당 사용자를 판단한 후, 이를 바탕으로 추가 로직(socket emit 등)을 구현했다!