iOS 및 Android에서 교차 출처 통신 브리지를 구축하는 방법

직장에서 특정 프로젝트를 진행하고 있었는데, 메시지를 통해 여러 다양한 구성 요소를 연결해야 했습니다. 각각은 고유한 논리와 코드 언어를 가지고 있었습니다. 이를 통해 다양한 플랫폼이 커뮤니케이션을 가능하게 하는 모든 방법을 이해하고 싶었습니다.

이 문서의 목적은 이러한 교차 출처 커뮤니케이션 브리지를 설명하고 이를 달성하기 위한 간단하면서도 유익한 예를 제시하는 것입니다.

브리지 말장난도 많이 있을 것입니까?

경고를 받았습니다.

코드로 손을 더럽히고 싶다면 이 기사 하단에 GitHub 리포지토리에 대한 링크가 있습니다.

일반적으로 작성한 JavaScript는 브라우저 내에서 실행됩니다. iOS에서 , UIWebView 또는 WKWebView일 수 있습니다. Android에서 , WebView.

iOS는 플랫폼에서 더 짜증날 수 있으므로 먼저 통신 브리지에 대해 설명하겠습니다.

런던 브리지가 무너지고 있습니다(iOS)

iOS 8부터 Apple은 UIWebView 대신 WKWebView를 사용할 것을 권장하므로 다음은 WKWebView의 브리지만 처리합니다. .

UIWebView 참조를 보려면 여기로 이동하십시오.

WKWebView에서 JavaScript로 메시지를 보내려면 아래 방법을 사용합니다.


- (void)evaluateJavaScript:(NSString *)javaScriptString 
         completionHandler:(void (^)(id, NSError *error))completionHandler;

WKWebView 내부의 JavaScript에서 메시지를 수신하려면 다음을 수행해야 합니다.

WKWebViewConfiguration의 인스턴스 만들기
WKUserContentController의 인스턴스 생성
구성에 스크립트 메시지 핸들러를 추가합니다(이 부분이 격차를 해소함). 또한 이 작업은 window.webkit.messageHandlers.MSG_HANDLER_NAME 경로 아래의 창 개체에 메시지 처리기를 등록합니다.
파일 상단에 를 추가하여 클래스가 메시지 처리기 프로토콜을 구현하도록 합니다.
userContentController:didReceiveScriptMessage 구현(이 메소드는 JavaScript에서 메시지 수신을 처리함)

교량 건설

다음 HTML 페이지가 설정되어 있다고 가정해 보겠습니다.

<html>
  
  <head>
    <title>Javascript-iOS Communication</title>
  </head>
  
  <body>
    
    <script>
      window.webkit.messageHandlers.myOwnJSHandler.postMessage("Hello World!");
    </script>
  </body>
  
  
</html>

그리고 네이티브 코드에서 위에서 설명한 단계를 구현합니다.

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

// 4
@interface ViewController : UIViewController <WKScriptMessageHandler>

@property(nonatomic, strong) WKWebView *webview;

그리고 비올라! 이제 완전한 JavaScript - iOS 통신이 생겼습니다!

Todd Diemer의 Unsplash 사진

다리 건너기(Android)

여기에서 상황이 훨씬 간단하고 친숙합니다. 통신 브리지를 설정하려면 몇 가지 단계만 수행하면 됩니다.

WebView 개체의 인스턴스 만들기
이 WebView 내에서 JavaScript를 활성화합니다(setJavaScriptEnabled )
자신만의 자바스크립트 인터페이스 설정(자바스크립트에서 볼 수 있는 메소드를 포함함)
자바스크립트에 노출하려는 모든 메소드에는 @JavascriptInterface 가 있어야 합니다. 주석 선언 전

이전과 마찬가지로 다음 HTML 파일을 생성했다고 가정해 보겠습니다.

그리고 다음과 같은 간단한 Android 애플리케이션을 만들었습니다.

자!

이제 자신을 네이티브 커뮤니케이션 닌자로 간주할 수 있습니다!

저장소에 대한 링크는 다음과 같습니다.

AndroidtoJS 저장소iOStoJS 저장소

⚠️ iOS 관련 중요 참고 사항 ⚠️

WKWebView를 파괴하려는 시점에 도달하면 필수적 스크립트 메시지 처리기를 제거합니다. 그렇게 하지 않으면 스크립트 메시지 핸들러는 여전히 WKWebView에 대한 참조를 보유하고 새 WKWebView를 만들 때 메모리 누수가 발생합니다.