웹_프론트엔드/TypeScript

[타입스크립트] 웹뷰 인터페이스 브릿지

young 2023. 8. 23. 14:44
반응형
// index.d.ts
// Window 객체에 각 네이티브별 인터페이스와 메서드 정의

declare global {
  interface Window {
    webkit?: {
      messageHandlers: {
        iOSInterfaceGoToScheme: {
          postMessage: (message: string) => void;
        },
        iOSInterfaceCloseWebview: {
          postMessage: (message: string) => void;
        };
      };
    };
    AndroidInterface?: {
      goToScheme: (data: string) => void;
      closeWebview: (message: string) => void;
    };
  }
}
// aos, ios 각각 해당 인터페이스가 있는지 확인 후 데이터 전달

if (os === "ios") {
      try {
        if (
          typeof window?.webkit?.messageHandlers?.iOSInterfaceGoToScheme !==
          "undefined"
        ) {
          window.webkit.messageHandlers.iOSInterfaceGoToScheme.postMessage(
            message
          );
        }
      } catch (error) {
        console.error("iOS goToScheme 실패", error);
      }
    } else if (os === "aos") {
      try {
        if (typeof window.AndroidInterface === "undefined") return;
        window.AndroidInterface.goToScheme(message);
      } catch (error) {
        console.error("AOS goToScheme 실패", error);
      }
    }
반응형