[React] 하이브리드 웹앱 웹뷰에서 Swift,Kotlin과 통신하기

네이티브 공수를 줄이기 위해 특정화면을 웹뷰로 진행하기로 했고, 작업했던 회고 정리하기

타입정의 하기

타입스크립트를 사용중이였기 때문에 글로벌로 타입을 정의!

 

// swift, kotlin과 통신하기 위에 window 객체를 사용
// typescript 사용할 경우, 내가 호출해야 하는 함수는 타입 정의 필요

declare global {
  interface Window {
    android: {
      NamingWithAOSDeveloper: Function;
    };
    webkit: {
      messageHandlers: {
        NamingWithIOSDeveloper: {
          postMessage: (param: string) => void;
        };
      };
    };
  }
}

export {};

 

AOS는 android 객체안에서 AOS 개발자와 함수를 서로 약속하고 해당하는 함수를 추가하는식!

IOS는 webkit 객체안에서 IOS 개발자와 객체를 서로 약속하고 그 안의  postMessage 함수로 핸들링!

 

[ TIP ] 웹뷰의 경우 로직간 시점문제가 발생할 수 있다.

Native에서 웹뷰 로드 완료라고 인식하는 시점과 실제 웹뷰 브라우저에서 로드 완료라고 인식하는 시점은 차이가 있을 수 있다!

내 경우에도 간혈적으로 통신이 진행되지 않는 경우가 있었는데, 위와 같은 이유로 추론했고, 이를 방지하기 위해서

브라우저에서 로드가 완료되면 Native로 브라우저 렌더가 완료되었음을 알리는 함수 호출

 

  const renderCompleted = () => {
    if (window.webkit)
      window?.webkit?.messageHandlers?.NamingWithIOSDeveloper?.postMessage(
        JSON.stringify({ message: "RENDER_COMPLETE" })
      );

    if (window.android) {
      window?.android?.NamingWithAOSDeveloper?.();
    }
  };

  useEffect(() => {
    renderCompleted();
  }, []);

 

브라우저에서 먼저 알리고 난 다음 이후 통신을 진행하게 했더니 문제가 해결 되었다!

 

이후 Native에서 웹뷰로 값을 전달하려면 window.addEventListener 로 등록해준다

여기서도 각각 IOS,AOS와 함수명을 서로 약속해야한다 !

 

interface CustomEventDetail {
	data: string;
}

const [aosData,setAosData] = useState<string>("")
const [iosData,setIosData] = useState<string>("")


const aosDataHandler = (e: CustomEvent<CustomEventDetail>) => {
    setAosData(`${e.detail}`);
  };
const iosDataHandler = (e: CustomEvent<CustomEventDetail>) => {
    setIosData(`${e.detail.data}`);
  };

  useEffect(() => {
  // NamingWithAOS, NamingWithIOS 으로 Native에서 함수 접근 가능
    window.addEventListener("NamingWithAOS", aosDataHandler as EventListener);
    window.addEventListener("NamingWithIOS", iosDataHandler as EventListener);

    return () => {
      window.removeEventListener(
        "NamingWithAOS",
        aosDataHandler as EventListener
      );
      window.removeEventListener(
        "NamingWithIOS",
        iosDataHandler as EventListener
      );
    };
  }, []);

 

토큰 등 헤더에 접근해야한다면 SSR로 ,,

클라이언트에서는 보안상의 이유로 헤더에 접근이 제한된다